CSS应用中不同浏览器的非预期结果与解决办法

1、<li/>浮动或其下块元素浮动在IE中显示不正常解决

.flt{float:left;display:inline;}

<ul>

      <li>

          <div class="flt">……</div>

          <div class="flt">……</div>

      </li>

</ul>

上面这行代码，在FF里面是正确的，但在IE，哪怕是IE 7都会显示不正常，两个div之间的间隔被扩得很大，即使再加一个div，定义类为

     .split{height:0;font-size:0;line-eight:0;clear:both;overflow:hidden;display:block;visibility:hidden;}

也不会起作用。唯一的解决办法是定义li的高度height:40px;虽然显示都正常了，但我还不知道为什么会这样。

（2009年1月4日）后记：今天终于知道原因了。其实我上面的那段代码不会出现问题，实际上我定义了<ul/>一个属性margin:10px 50px;这时<li/>下的两个元素之间在IE 6和IE 7中都会有大约50px的间距（好像继承了<ul/>的margin属性的一部分），和<ul/>左右边距一样大。如果将它的左右边距设为0，<li/>下的两个元素就紧挨着了（上下边距在IE里还是能显示正常的）。当然，如果不想把要有的空白定义在<ul/>的父级元素，就可以像上面我原来的解决办法一样，给<li/>定义一个高度就OK了！

====================================

（2009年1月12日）后记：<ul/>下的<li/>在IE（即使是IE7）中会继承一部分<ul/>的margin和padding属性：继承margin的左右边距值，继承padding的上下填充值。因此，可以放心地为<ul/>设置上下边距值和左右填充值，但要反过来就要小心了。这都是在<li/>浮动时会有这种情况，当不浮动时就没有必要这么小心了。

 

2、复选框与单选框写法（很多时候都想不起html里面还有一个label标签）：

<div><!--复选框-->
<p>
    <input type="checkbox" name="terms" id="terms"/>
    <label for="terms">I have read the terms and conditions</label>
</p>
<p>
    <input type="checkbox" name="offers" id="offers" checked="checked"/>
    <label for="offers">I agree that you can contact me regarding special offers in the future</label>
</p>
</div>

<div><!--单选框-->
<p>
    <input type="radio" name="timeslot" id="morning" value="morning"/>
    <label for="morning">In the morning</label>
    <br/>
    <input type="radio" name="timeslot" id="afternoon" value="afternoon"/>
    <label for="afternoon">In the afternoon</label>
    <br/>
    <input type="radio" name="timeslot" id="evening" value="evening"/>
    <label for="evening">In the evening</label>
</p>
</div> 

 

3、不规则的背景用绝对定位实现，可能会用到z-index（Z-index 仅能在定位元素上奏效）,有时这种方法甚至会用到banner上。CSS Zen Garden上就是大量应用的这种方法。

 

4、为实现内容在一个区域滚动，除了作为iframe使用外，可以设定区块大小，同时指定overflow:auto;或根据需要指定overflow-x和overflow-y。

 

5、去掉超链接点击后的虚线框：

           一个最简单的办法，是在<a/>中加入οnfοcus="this.blur()"，可以使超链接在点击后不会出现虚线框。

           之前在书上看到过，通过设置属性或css来去掉，一种方式只有ie支持，另一种方式只有firefox支持，当时还记下了，不过现在用到了想找，缺找不到了。哪位要知道的话麻烦告诉我一下。

 

6、iframe元素，当没有设置scrolling="no"之前，如果没有超出范围，firefox不会显示滚动条，但IE却要显示。

 

7、CSS中text-indent属性在<span/>中不起作用，而要把span设为“display:block;”才可以，不知是不是内联元素都这样。

     还有设置input的pading-left和padding-right不起作用，只能用margin替代。之前好像a可以设置。同样是内联元素，设置时还不一定相同。

 

8、<li/>在IE下有一个默认的大小，用css不可设置，清除浮动时要注意。

     ===========================================

     （2009年2月3日）<li/>在IE下有默认的间距，大概2px。

 

9、ie中如果一个父级元素设定position:relative;那么它的所有子级元素如果浮动，将全部不可见，只要去掉该属性即可。（2009年2月12日）

 

10、<select>在ie6中用浮层无法覆盖，总会透出来，但可以在浮层下加一层<iframe>（将它定义为浮层），这样通过iframe这个层盖住复选框，再在上面放置自己定义好的浮层就表现正常了。（2009年3月3日16:54:57）

 

11、不同的定位方式在ie下可能有问题，如果检查半天找不到ie表现异常的原因，那就查查所有用到定位的元素，很有可能就是它们的原因。

 

12、有时设置一个纵向的平铺图片，由于子元素中有浮动，即使最后进行了浮动清除，也有可能不会显示出来，这时只要设置一个最小高度即可：height:auto;_height:100px;min-height：100px;。（2009-4-13）

 

13、ie下左右边线（border）段线（部分忽隐忽现）问题：如果容器内有两个浮动，并用CLEAR清除浮动。在ie下拖动滚动条时最外层的border会消失，如果给最外层加上宽度或者高度就不会出现。这是一个奇怪的现象，目前还不能解释是什么原因所导致的。（2009-4-16 10:58:58）

 

14、IE下如果设置了LI的高度，会出现渲染错误，原因我也不知道，但是可以使用line-height代替height，就没有问题了。或者float一下也可以。还有，在ie下ul浮动后下面会有一个默认的高度，但为啥，还未知，我所用的解决办法也只有定义父级元素的高度。

 

15、如果ul设为浮动，这时为ul设定padding或margin会出现问题，ie下li会部分继承（参考第1条）。

       如果li向左浮动排成一排，若li里面有块级元素，必须设定里面的块级元素也向左浮动，否则ie下会莫名其妙的li加宽，出现不是自己预期的结果（一般是1像素）。即使这样，有时仍有问题，不会出现预期效果。

 

16、实在找不到原因又懒得去找时可以用（我总记不清怎么写）

        <!--[if IE]>
        <style type="text/css">

 

        </style>
        <![endif]-->