项目中的一些css问题总结

Bug-IE6:

项目背景：tab实现

html：

ul{
    height : 25px;
    _overflow:hidden;//很重要!
    border-bottom : 2px solid #ccc;
}
li{
    height : 24px;
    border-width : 1px 1px 0 1px;
    .....
}
li.current{
    border-width : 3px 1px 0 1px;
    .....
}

bug表现：li无法超出ul的高度以便将ul的下边框挡住，z-index、margin-top什么的都是浮云...

解决方案：给li设置position:relative,让他脱离标准流，当然，需要设置top:2px,至此该bug解决。

Bug-IE:

项目背景：做字体居中显示的表格

html:

<tr>
    <td class="w100">...</td>
    <td class="w150">...</td>
    <td class="w50">...</td>
</tr>
td{
    text-align : center;
}

bug表现：如果table的实际宽度不是300px;就算td设置为字居中显示，在IE里也不会居中。

解决方案：至少留一个td宽度不设置而让其自适应

Bug-Ie6:

bug表现：在IE6中，外层为relative，内层为absolute后，内层设置height：100%无效。

解决方案：外层div设置overflow:hideen;内层设置height为9999;这样各浏览器兼容。

Bug-IE6:

bug表现：因为呈现需要，在iframe指向的页面内放了<!--[if IE6]>......<![End if]>,竟导致IE6中弹出该iframe时一片空白。

解决方案：iframe的src指向的页面不能包含类似脚本。当然没有问题。

Bug-IE6/7:

html:

<div style="margin-left:110px">
    <p>
        <input type="text"/>
    </p>
</div>

bug表现：input会继承外层div的margin。

解决方案：input加样式_margin-left:-110px;

Bug-IE6:

html:

<input type="submit" class="button" value="提交"/>
.button{
    display:inline-block;
    width:100px;
    height:20px;
    overflow:hidden;
    cursor:pointer;
    background:none;
    background-image:url(/images/buttons.png?v=2.1.0);
    background-repeat:no-repeat;
    overflow:hidden;
}

bug描述：submit中的文字会显示一道黑点。

解决方案： 给button添加样式：line-height:0; font-size:0;border:none;

Bug-IE6:

bug描述：如果页面使用了DD-delated来兼容透明图片，某些元素的background-position会和FF中的表现不一致。

解决方案：需要将该文件涉及的标签改一下（在DD-delated设置中），以统一IE中的效果。

Bug-IE6/7/8

bug描述：当iframe中的div 没有贴紧iframe边界，此时IE6、7会显示html的白色背景（iframe页面中的白色背景），经测试：不是Iframe的背景。

解决方案：给body加background:none,html加background:none（因为FF不支持html的background的opacity设置，测试时opacity是无效的）,background:#000;filter:alpha(opacity=75)(这个是因为外面是黑色75透明底)，但此方案再IE8下也存在问题，经上网查找，设置iframe中的body的background:transparent,iframe的allowtransparency="true",截止至此，bug解决。透明的iframe无法遮挡select，所以解决方案只能是隐藏select（在js设置）。

bug-IE6:

bug描述：div的margin-top有时会失效（当为body子元素时）。

解决方案：设置为position:relative,加入top属性来解决了。

对齐问题：

html：

<li>
    <label>....</label>
    <input  type="text" />
    <span>.....</span>
</li>

针对<span>中的提示信息，经常与前面的信息对不齐，IE8、9、10，FF，chrome，IE6，7基本都有偏差，除了使用position:relative个别调整外，一定要使用vertical-alian:middle，效果显著，基本都解决掉了。至于前面label和input使用相同的高度，配合line-height基本效果还好。

bug-IE6

html:

<div style="display:block">
    <p style="background:url(....) ..... no-repeat">........</p>
</div>

bug描述：当用js控制div显示时（用show()方法），p的背景无法显示

解决方案：此时在div上加入position:relative解决。

bug-IE6:

html：

<table>
    <tr>
        <td colspan="9">
            <p>没有相应记录</p>
        </td>
    </tr>
</table>
p{
    display:inline-block;
    zoom:1;
    vertical-align:middle;
    background:url(...) ... no-repeat;
    text-indexnt:20px;
    .....
}

bug描述：p为行内块级元素，但在IE6中，P没有自动收缩，而是占据了一行，前面的图标在行的最左侧。

解决方案：设置p display:inline;_zoom:1 .或者用span代替P标签。

bug-IE6

html:

<a class="step">
    <b>.....</b>
    <span class="title">....</span>
</a>
.step:hover{
    .....
}
.step:hover b{
    background-position:-32px -243px;
}
.step:hover .title{
    color:#000;
}

bug描述：b改了background-position属性，在IE6下该改变没有生效。

在该标签加了color、border、font-size等属性或在background-position后面加!important试图触发该样式的改变，始终没有生效。

解决方案：加属性border-bottom:1px solid #f7f7f7;即该样式确实是能看到效果的，只是调整为真实情况下和不加该样式没差别。

网站ICon设置：
favicon.ico放在网站根目录。
在网页上设置
此方式兼容IE6+\FF\chrome。 一般IE会等几天才显示出来该图标。

实现如下的剧中(兼容IE8+)

html:

<div class="shadowSquare fl ml20 tc">
                <p class="f14">
                    累计奖励金额: <span class="redText1">100</span>
                <br/>
                    预计分成金额: <span class="redText1">100</span>
                <br/>
                    实际总收入: <span class="redText1">100</span>
                </p>
            </div>

style:

.shadowSquare{
    box-shadow:2px 3px 5px #ccc;
    width:245px;
    height:130px;
    background-color:#fff;
    display:table
}
.shadowSquare p{
    display:table-cell;
    vertical-align:middle;
    color:#4d4d4d
}

IE6bug:

1、代码&&效果如下：

.myxyLeftMenu .list dt,.myxyLeftMenu .list dd{
    height:30px;
    line-height:30px;
    background-color:#ccc
}
.myxyLeftMenu .list dd a{
    display:block;
    color:#333;
    text-indent:43px;
    width:100%;
    background-color:pink
}

2、代码&&效果如下：

.myxyLeftMenu .list dt,.myxyLeftMenu .list dd{
    height:30px;
    line-height:30px;
    background-color:#ccc
}
.myxyLeftMenu .list dd a{
    display:inline-block;
    color:#333;
    text-indent:43px;
    width:100%;  
    background-color:pink
}

二者区别就在display属性上。

bug-IE6

问题描述：IE6不支持负margin

解决方法：给该元素添加position:relative

布局问题：

解决方法：根据padding + 绝对定位的方式将两个图标挂在两边。

.wrap
{
    height:25px;
    position: relative;
    padding:0 80px 0 40px
}
.UI-money {
     position: absolute;
     top: -5px;
     left: 0
 }
.UI-cuteGirl {
    position: absolute;
    top: -35px;
    right: 0
}
```javascript
#####IE6bug:
######问题描述：当元素不设置width和height的情况下，仅仅依靠内部元素撑起。此时该元素又恰好是position:relative作为内部absolute元素的定位参考元素，那么在IE6下面，内部的定位会从除去padding的位置开始按照left top来做定位，而其它浏览器都是按照padding在内的位置开始计算，这才是正确的显示。
######解决方法：将该外层元素(即position为relative的元素)设置zoom:1触发layout，那么IE6将呈现与其他浏览器一致的状态。
> 没有设置zoom时的状态：
<img src="deb1a09a-21d6-412c-928a-5c435d13c0b1_files/86b5a548-6e4f-4a84-97ba-cffdbb533191.png" border="0" alt="" name="" height="41" width="284">
> 设置完zoom的状态：
<img src="deb1a09a-21d6-412c-928a-5c435d13c0b1_files/2234b90b-339d-49be-a96e-cceb3f3082ac.png" border="0" alt="">
######关于浮动的问题：
* 如果外层的尺寸固定，那么内部有两个float也无所谓，此时用不到外层随内层适应的问题。
* 当如果外层的尺寸需随浮动的子元素自适应高度，那么可以这样解决：
```javascript
div1{
    float:left;
    width:22px;
    height:100%;
    margin-right:10px;
    _margin_right:-3px;    //解决IE6下的3像素bug
}
div2{
    display:inline-block;
}

此时外层元素随div2的高度自适应，但此时的问题是：
如果左侧浮动元素div1的高度设置了100%，但实际上它无法达到外层元素的高度，也就是无法计算，因为外层元素的高度没有显式定义。
但如果此时你明确定义过div2的高度，那么你就可以使用这种方式做浮动布局。
值得一提的是，就算外层设置上min-height，内部的左侧浮动元素依然无法设置100%高度布局，但是你可以使用这种方式使布局更整齐。IE6除外。

• 在外层不使用min-height的情况下，IE6&7中外层元素会自适应到左侧浮动元素的高度，但其他浏览器中外层元素则不会按左侧元素自适应，只会按右侧元素自适应。
  min-height的问题如果使用hack这样修复后：

  {
    height:auto!import;
    height:1100px;
    min-height:1100px;
  }

  方案解释：以上代码指定在除IE6的浏览器中，height为1100px且是auto的，IE6下因为不识别!import，那么IE6只会使用到height:1100px这个样式，那么将达到min-height:1100px的效果，因为如果内部的元素的高度大于这个高度，IE6下外层元素依然会被撑起。

• 让我们再来看看这个解决方案，在IE6下，因为使用了height样式且为固定的值，那么内部元素的百分比高度得以被计算。但在其他浏览器中，由于我们实际使用的样式是height:auto和min-height,那么将不会使得左侧浮动元素得到正确的100%的高度。

  最后还是回顾下clearfix这个终极方案：

  .clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
  }
  .clearfix{*zoom:1;}

  它大致就是利用:after伪属性来给外层元素加一个after块级后置元素，并设置该子元素为不可见，并在上面设置clear:both清楚浮动，来使得父元素可以高度自适应。而*zoom:1是考虑到IE6&7不支持:after伪属性。

百分比宽高的渲染

• 如果一个元素内部有定位元素且该定位元素是按百分比定义width和height:

  那么在IE6下，如果外层元素的宽高没有显式定义，那么内部的定位元素的百分比宽高将不会被渲染，其他浏览器则都可以按照外层元素的实际高度进行渲染。
  但是对于非定位元素，如果外层仅仅因为内部元素使得自身高度被撑起，此时内部的子元素如果设置了height:100%，那么将不会按100%进行和该父元素一样的高度渲染。这个特性并不会因为该子元素的浮动属性有所改变。

img与块级元素

• 当用负边距做这么一个布局：
  

能少则少，所以使用了这样的html:

<div>
    <img src='' id='left'/>
    <div id='right'></div>
</div>

样式可以这样:

img{
    float:left;
    margin-left:-100px;
}

也就是说，我们不用对IE6做任何的hack就可以解决问题。

但如果将img的样式改成这样:

{
    float:left;
    display:block;
    margin-left:-100px;
    _position:relative;
    _margin-left:-50px;
}

也是OK的，也就是说,img很多时候表现得像一个块级元素，但它和块级元素的渲染还是有差别。

如果img是用一个div标签写的，那么该标签的样式应该是：

#left{
    float:left;
    margin-left:-100px;
    _position:relative;
    _margin-left:-50px;
}

或这样：

{
    float:left;
    margin-left:-100px;
    _display:inline
}

也是OK的。

DDpng引起的问题

问题描述：当图片起初为display:none, 而后又被脚本显示出来时，IE6下的png会仍然无法显示出来。

解决方案：每次将处于这些情况下的图片进行处理，要么使用jpg，要么控制其不使用DDpng的处理，很挫哈，没办法哎...

来自为知笔记(Wiz)