文章标签 ‘css bug’
这个Bug在IE5.x以及更低版本的浏览器下存在,IE5.x以及更低版本的浏览器在解析时错误的认为:
元素的宽度包括元素的左右边框和左右补白…
元素的高度包括元素的上下边框和上下补白…
但IE6开始已经更正了这个问题,目前世面上使用IE5.x-的用户很少,根据统计已经基本上没有了,那么你甚至可以忽略这个Bug的存在,但既然存在,我们还是要对它进行一些说明…
style:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>盒模型Bug</title>
<style>
#dv{
width:400px;
margin:40px;
border:solid red 5px;
padding:0 40px;
height:50px;
}
</style>
</head>
<body>
<div id=”dv”><div>
</body>
</html>
预览如下:
上面的一层是IE7下的效果,下面一个是IE5.5的效果,很明显,它们之间的差距很大!那么如何解决这个问题:
我们需要编写一个Hack对它进行兼容性处理,这里提供二种方法:
1, 过滤器
#dv{
width:400px;
margin:40px;
border:solid red 5px;
padding:0 40px;
height:50px;
voice-family: “\”}\”";
voice-family:inherit;
width:310px;
height:40px;
}
2, 转义属性
#dv{
width:400px;
margin:40px;
border:solid red 5px;
padding:0 40px;
height:50px;
widt\h:310px;
heigh\t:40px;
}
经过修复后的对比:
现在看到的效果就一样了!
博主不想出什么教程,在实际工作中碰到一个,就记录一个,所以常见Css Bug及修复不一定连续,不过你如果有兴趣,可以浏览这个分类下的所有文章连续阅读!
CSS Bug,Hack,Filter
Css Bug 很容易理解, 不同浏览器厂商所使用的核心架构和代码不一样,对各种CSS的解释也就不一样,这样便产生了很多种奇怪的现象, 这里成为Css Bug
Hack 是指一种兼容CSS在不同浏览器中正确显示的技巧方法,显然这种程序带有消极情绪,因为它们都是属于对CSS代码的非官方修正或者补丁,另一种称呼叫Patch
Filter 过滤的意思,这里并非是只有IE才支持的滤镜特效,它是一种对特定浏览器或者浏览器组显示或者隐藏规则和声明的方法
一句话概括他们之间的关系: Filter是一种能够通过过滤不同浏览器而达到修复Css Bug的Hack类型!
CSS Hack 和 Filter 的设计方法:
1, 利用浏览器自身的Bug,来隐藏或显示样式声明
2, 利用浏览器对CSS支持的不完善,例如对某些语法和结构还不支持,来形成隐藏和显示样式
建议使用第2种方法来实现浏览器兼容
推荐个权威的CSS Filter站点: