css常见bug

2013-07-21 css 阅读量

IE6如何定义高度很小的容器

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

IE6下min-height兼容问题?

1	div{ min-height: 200px; height: auto !important; _height: 200px;} /顺序不可变/

IE6使用滤镜PNG图片透明后，容器内链接失效的问题

1
2

div{ width: 300px; height: 100px; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='*.png');}
a{ _position: relative;} /*为容器内的链接定义相对定位属性position的值为relative*/

IE6/7使用绝对定位左右布局，左侧元素位置偏移

描述：左侧定位元素在不加left:0的情况下，右侧元素自适应时，左侧元素在IE6下会发生偏移

解决办法：

右侧元素使用padding-left；不要使用margin-left;
给左侧元素加left:0

IE6/7下设置滚动条(overflow:auto)不起作用：

解决办法：加一个positon:relative

IE6/7下用position:absolute后无法显示的原因

position:absolute定位元素在IE6下无法显示，奇怪的是平时用position:absolute进行定位却没有这个问题。

原来IE6下采用绝对定位的元素如果紧接着浮动元素，那么就有可能显示不出来。

问题找到了，解决办法也就找到，主要思路就两种：

采用position:aboslute进行绝对定位的元素不要紧接着浮动元素。
在采用position:aboslute进行绝对定位的元素前增加一个清除浮动的元素。

IE6/7下textarea右侧竖滚动条痕迹消失的问题

1	textarea{overflow: auto;}

IE6/7图片下方出现几像素的空白间隙？

使li浮动，并设置img为块级元素
img{vertical-align: bottom/middle/top;} 其中的任何一个都可以

IE6/7下当li中出现2个或以上的浮动时，li之间产生的空白间隙bug

方法：

1	li{vertical-align:top;} /除了top值，还可以设置为text-top \| middle \| bottom \| text-bottom，甚至特定的<length>和<percentage>值都可以/

IE6下line-height失效

bug原因:

当在一个容器里文字和img、input、textarea、select、object等元素相连的时候，对这个容器设置的line-height数值会失效；同时以上元素的行高可能×2：

解决方法：

1	.div li input{margin:10px 0px;vertical-align:middle;} /margin的作用在于调整他和容器上下的间距/

受影响的浏览器： IE 5.01 / IE 5.5 / IE 6;
解决方法：

对和文字相连接的img、input、textarea、select、object等元素加以属性

margin: (所属line-height-自身img,input,select,object高度)/2px 0;vertical-align:middle;

1 2	.hh li{ line-height:50px; } .hh li img{margin:20px 0;vertical-align:middle; } /所属line-height-自身img,input,select,object高度)/2px /

IE6/7/8下input、button的padding兼容问题

解决办法：

1
2
3

input,button{overflow:visible;}
/*or*/
input{ padding: 0 .25em; width: auto; _width: 0; overflow:visible !ie;}

摘自：http://www.planabc.net/2008/11/12/the_stretched_buttons_bug/

这个对于FF和IE下对input按钮设置padding大小不一，可以很好的解决

火狐：input::-moz-focus-inner {border: 0; padding: 0; margin-top: -1px; margin-bottom: -2px;}

a标签使用绝对定位后无法点击

设置一张背景图后，需要此背景图可点击，于是在背景图的上层绝对定位一个有宽高的a标签，但a标签无法被点击！

解决办法为：给a标签增加 background:url(about:blank) 或 background-color:white;opacity:0;filter:alpha(opacity=0)

解决Firefox下input button内文字垂直居中

众所周知，在Firefox下input type=”button”的文字是不好居中的，原因在于Firefox自己比较二，弄了个私有属性，导致以下问题的出现：

按钮左右本身有2px的间距（FF私有属性写了padding:0 2px所致）；
按钮文字居中是不行的（此时设置padding-bottom是没用的）；
等等…

解决办法：

input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner{
        border:none;padding:0;
}

ie中如何让超出宽度的文字显示为省略号？

定义容器为：

1	overflow:hidden; width:100px; white-space:nowrap; text-overflow:ellipsis;

如何在点文字时也选中checkbox?

方法1：

1 2	<!-- 该方式所有主流浏览器都支持 --> <input type="checkbox" id="chk1" name="chk" /><label for="chk1">选项一</label>

方法2：

1 2	<!-- 该方式相比方法1更简洁，但IE6及更早浏览器不支持 --> <label><input type="checkbox" name="chk" />选项一</label>

为什么在web标准下ie无法设置滚动条的颜色？

将设置滚动条颜色的样式定义到html标签选择符上即可
解决办法：在CSS中对body的设置改为对html的

body { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff;}

解决办法是将body换成html

超链接访问过后hover样式就不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,
解决方法是改变CSS属性的排列顺序: L-V-H-A Code

FORM标签样式问题

这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,
因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,
我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,所以后面就不会为这个头疼了.