CSS Bugs及解决方案列表

左手的ㄟ右手 2021-06-26 16:06 423阅读 0赞

`Bugs`及解决方案列表（以下实例默认运行环境都为`Standard mode`）：

**1、如何在IE6及更早浏览器中定义小高度的容器？**

方法：

#test{ overflow:hidden;height:1px;font-size:0;line-height:0;}

注：IE6及更早浏览器之所以无法直接定义较小高度的容器是因为默认会有行高

**2、如何解决IE6及更早浏览器浮动时产生双倍边距的`BUG`？**

方法：

#test{ display:inline;}

注：当在IE6及更早浏览器中出现浮动后`margin`值解析为双倍的情况，设置该元素的`display`属性为`inline`即可。

**3、如何在IE6及更早浏览器下模拟`min-height`效果？**

方法：

#test{ min-height:100px;_height:100px;}

注：此时`#test`不能再设置`overflow`的值为`hidden`，否则模拟`min-height`效果将失效

**4、如何解决按钮在IE7及更早浏览器下随着`value`增多两边留白也随着增加的问题？**

方法：

input,button{ overflow:visible;}

**5、如何解决IE7及更早浏览器下当`li`中出现2个或以上的浮动时，`li`之间产生的空白间隙的BUG？**

方法：

li{ vertical-align:top;}

注：除了`top`值，还可以设置为`text-top | middle | bottom | text-bottom`，甚至特定的`<length>`和`<percentage>`值都可以

**6、如何解决IE6及更早浏览器下的3像素`BUG`？**

方法：

.a{ color:#f00;}
    .main{ width:950px;background:#eee;}
    .content{ float:left;width:750px;height:100px;background:#ccc;_margin-right:-3px;}
    .aside{ height:100px;background:#aaa;}
    
    <div class="main">
    	<div class="content">content</div>
    	<div class="aside">aside</div>
    </div>

注：在IE6及更早浏览器下为`.content`设置`margin-right:-3px`；也可以设置`.aside`为浮动  
**7、如何解决IE6下的文本溢出BUG（江湖匪号：“谍影重重”或“一只猪的故事”）？**

BUG重现：

.test{ zoom:1;overflow:hidden;width:500px;}
    .box1{ float:left;width:100px;}
    .box2{ float:right;width:400px;}
    
    <div class="test">
    	<div class="box1"></div>
    	
    	<div class="box2">↓这就是多出来的那只猪</div>
    </div>

运行如上代码，你会发现文字发生了溢出，在IE6下会多出一只“猪”。造成此`BUG`的原因可能是多重混合的，如浮动，注释，宽高定义等等。并且注释条数越多，溢出的文本也会随之增多。

列举几个解决方法：

*  删除`box1`和`box2`之间所有的注释；
 *  不设置浮动；
 *  调整`box1`或`box2`的宽度，比如将`box`的宽度调整为`90px`

**8、如何解决IE6使用滤镜PNG图片透明后，容器内链接失效的问题？**

方法：

div{ width:300px;height:100px;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='*.png');}
    a{ _position:relative;}

解决方法是为容器内的链接定义相对定位属性`position`的值为`relative`

**9、如何解决IE6无法识别伪对象`:first-letter/:first-line`的问题？**

方法1：

p:first-letter { float:left;font-size:40px;font-weight:bold;}
    p:first-line { color:#090;}

增加空格：在伪对象选择符`:first-letter/:first-line`与包含规则的花括号"\{"间增加空格。

方法2：

p:first-letter
    { float:left;font-size:40px;font-weight:bold;}
    p:first-line
    { color:#090;}

换行：将整个花括号"\{"规则区域换行。细节参见E`:first-letter`和E`:first-line`选择符

**10、如何解决IE8会忽略伪对象`:first-letter/:first-line`里的`!important`规则的问题？**

BUG重现：

p:first-letter { float:left;font-size:40px;font-weight:bold;color:#f00!important;color:#090;}

如上代码，在IE8下`color`定义都会失效，原因就是因为有`color`使用了`!important`规则。鉴于此，请尽量不要在`:first-letter/:first-line`里使用`!important`规则。

**11、如何解决IE6会忽略同一条样式体内的`!important`规则的问题？**

BUG重现：

div{ color:#f00!important;color:#000;}

如上代码，IE6及以下浏览器`div`的文本颜色为`#000`，`!important`并没有覆盖后面的规则，也就是说`!important`被忽略了。解决方案是将该样式拆分为2条，细节参见`!important`规则

**12、如何解决IE6及更早浏览器下当li内部元素是定义了`display:block`的内联元素时底部产生空白的问题？**

BUG重现：

a,span{ display:block;background:#ddd;}
    
    <ul>
    	<li><a href="http://css.doyoe.com/">CSS参考手册</a></li>
    	<li><a href="http://blog.doyoe.com/">CSS探索之旅</a></li>
    	<li><a href="http://demo.doyoe.com/">web前端实验室</a></li>
    	<li><span>测试li内部元素为设置了display:block的内联元素时底部产生空白</span></li>
    </ul>

如上代码，IE6及更早浏览器每个`li`内部的内联元素底部都会产生空白。解决方案是给`li`内部的内联元素再加上`zoom:1`

**13、如何解决IE6及更早浏览器下未定义宽度的浮动或绝对定位元素会被内部设置了`zoom:1`的块元素撑开的问题？**

BUG重现：

#test{ zoom:1;overflow:hidden;border:1px solid #ddd;background:#eee;}
    #test h1{ float:left;}
    #test .nav{ float:right;background:#aaa;}
    #test .nav ul{ zoom:1;overflow:hidden;margin:0;padding:0;list-style:none;}
    #test .nav li{ float:left;margin:0 5px;}
    
    <div id="test">
    	<h1>Doyoe</h1>
    	<div class="nav">
    		<ul>
    			<li><a href="http://css.doyoe.com/">CSS参考手册</a></li>
    			<li><a href="http://blog.doyoe.com/">CSS探索之旅</a></li>
    			<li><a href="http://demo.doyoe.com/">web前端实验室</a></li>
    		</ul>
    	</div>
    </div>

如上代码，IE6及更早浏览器`div.nav`会被设置了`zoom:1`的`ul`给撑开。

列举几个解决方法：

*  设置ul为浮动元素；
 *  设置ul为`inline`元素；
 *  设置ul的`width`

**14、如何解决IE7及更早浏览器下子元素相对定位时父元素`overflow`属性的`auto|hidden`失效的问题？**

BUG重现：

div{ overflow:auto;width:260px;height:80px;border:1px solid #ddd;}
    p{ position:relative;margin:0;}
    
    <div>
    	<p>如果我是相对定位，我的父元素overflow属性设置为auto|hidden将失效。如果你使用的是IE及更早浏览器，你将可以看到这个BUG</p>
    	<p>如果我是相对定位，我的父元素overflow属性设置为auto|hidden将失效。如果你使用的是IE及更早浏览器，你将可以看到这个BUG</p>
    </div>

如上代码，在IE7及更早浏览器下你会看到`div`的滚动条将无法工作。解决方案是给`div`也设置相对定位`position:relative`

**15、如何解决Chrome在应用`transition`时页面闪动的问题？**

方法：

-webkit-transform-style:preserve-3d;或-webkit-backface-visibility:hidden;

在Chrome下，使用过渡效果`transition`时有时会出现页面闪动