当前位置: 首页 > Web前端 > HTML

IE6常见CSS解析bug和hack-程序员好H5前端

时间:2023-04-02 11:25:30 HTML

1.默认高度(IE6)说明:在IE6及以下版本中,部分块元素有默认高度(16px左右;)hack1:给元素添加声明:font-size:0;hack2:在元素中添加语句:overflow:hidden;2.图片有边框BUG,图片添加到IE时会出现边框Hack:addborder:0;或边框:无;到图片。Picturegap,picturegapBUGindiv描述:在div中插入图片时,图片会将div的底部扩大大约三个像素。Hack1:在一行中写和;ie6hack2:将其转化为块元素,添加声明:display:block;hack3:添加vertical-align:top/middle/bottom到图片。4.doublefloat(doubleDoublemargin)(仅在IE6中出现)说明:Ie6及以下版本的浏览器在解析浮动元素时,会错误地将浮动边距加倍。Hack:向浮动元素添加声明:display:inline;5.表单元素行高对齐不一致问题描述:表单元素行高对齐不一致Hack:在表单元素中添加声明:float:left;6.按钮元素默认大小不一样说明:各浏览器按钮元素大小不一致hack1:统一大小/(用标记模拟)hack2:在input外面设置一个标签,把按钮的样式写在里面这个标签,并删除输入的边框。Hack3:如果按钮是图片,就用图片作为按钮的背景图。7、百分比bug说明:在IE7及以下解析百分比时,会四舍五入计算,导致50%加50%大于100%的情况。(也会受系统影响)hack:在右边的浮动元素上添加语句:clear:right;含义:清除右浮动。8.鼠标指针bug描述:cursor属性的hand属性值只有IE9以下的浏览器才能识别,其他浏览器不识别该语句。cursor属性的pointer属性值被IE6.0及以上版本及其他核心浏览器识别。Hack:要将元素的鼠标指针形状统一为一只手,您应该添加一条语句:cursor:pointer;9.透明属性兼容其他浏览器:opacity:value;(取值范围0-1;例子:opacity:0.5;)IE浏览器写法:filter:alpha(opacity=value);取值范围0-100(整数)10.li列表的BUG1:当父元素(li)有float:left时;子元素(a)没有浮动会出现垂直bug;hack:为父元素li和子元素a都设置floating;2):当li中的a转为block时;并且有height和float,没有设置float的话会出现阶梯显示。hack:同时给li加上float;11、当li中的a和span分别加上左右浮动,并设置li的高度后,IE7及以下浏览器会在li下方出现3像素左右的Gap;技巧:添加float:left;和宽度:100%到li;12、当当前元素(父元素中的第一个子元素)和父元素没有任何浮动设置时,设置margin-top后,会报错给父元素添加margin-top。Csshack:1.添加overflow:hidden到父元素;(推荐)2.给父元素或子元素添加float3.当父元素有边框时,可以直接给子元素添加margin-top值;13.marginBUG当两个元素上下排列时,上面的元素有margin-bottom:30px;下面的元素有margin-top:20px;它们之间的距离不会增加,但会设置为更大的值;