容我织梦 » hack

[ 总结]浏览器兼容手册

Frog — Mon, 23 Nov 2009 01:42:13 +0000

浏览器兼容手册
1. 居中问题
div里的内容，IE默认为居中，而FF默认为左对齐
可以尝试增加代码margin:auto
2. 高度问题
两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间
所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是 height:100%;
但当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，对应CSS是：
.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}
3. clear:both;
不想受到float浮动的，就在div中写入clear:both;
4. IE浮动 margin 产生的双倍距离
#box {
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}

5. padding 问题
FF设置 padding 后，div会增加 height 和 width，但IE不会（* 标准的 XHTML1.0 定义 dtd 好像一致了）
高度控制恰当，或尝试使用 height:100%;
宽度减少使用 padding
但根据实际经验，一般FF和IE的 padding 不会有太大区别，div 的实际宽 = width + padding ，所以div写全 width 和 padding，width 用实际想要的宽减去 padding 定义
6. div嵌套时 y 轴上 padding 和 marign 的问题
FF里 y 轴上子div 到父div 的距离为父padding + 子marign
IE里 y 轴上子div 到父div 的距离为父padding 和子marign 里大的一个
FF里 y 轴上父padding=0 且 border=0 时，子div 到父div 的距离为0，子marign 作用到父div 外面
7. padding，marign，height，width 的傻瓜式解决技巧
注意是技巧，不是方法：
写好标准头

高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div
宽尽量用margin，慎用padding，width算准实际要的减去padding
列表类
1. ul 标签在FF中默认是有 padding 值的，而在IE中只有margin有值
先定义 ul {margin:0;padding:0;}
2. ul和ol列表缩进问题
消除ul、ol等列表的缩进时，样式应写成: {list-style:none;margin:0px;padding:0px;}
显示类
1. display:block,inline 两个元素
display:block; //可以为内嵌元素模拟为块元素
display:inline; //实现同一行排列的的效果
display:table; //for FF,模拟table的效果
display:block 块元素，元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度

，

，
，
和
是块元素的例子
display:inline 就是将元素显示为行内元素，元素的特点是：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
，，，，，和是 inline 元素的例子
2. 鼠标手指状显示
全部用标准的写法 cursor: pointer;
背景、图片类
1. background 显示问题
全部注意补齐 width，height 属性
2. 背景透明问题
IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
IE: filter: alpha(opacity=10);
FF: opacity:0.6;
FF: -moz-opacity:0.10;
最好两个都写，并将opacity属性放在下面

汇总IE8以及其他的浏览器兼容hack

Frog — Tue, 20 Oct 2009 10:13:57 +0000

网上很多，这类的兼容问题的汇总.
#box{
color:red; /* 所有浏览器都支持 */
color:red !important;/* Firefox、IE7支持 */
_color:red; /* IE6支持 */
*color:red; /* IE6、IE7支持 */
*+color:red; /* IE7支持 */
color:red\9; /* IE6、IE7、IE8支持 */
color:red\0; /* IE8支持 */
}

关于IE8的css hack

Frog — Wed, 05 Aug 2009 01:55:23 +0000

IE8出世已经很长时间了，一直都没工夫去用。最近升级了一下浏览器，说实话，我不是很喜欢，可能是也是习惯的原因吧。
对于前端开发的关注过IE8的css hack的人相信大家都在使用这个hack，就是“\9”的css hack：

.mytest{
color:#000000; /* FF,OP支持 */
color:#0000FF\9; /* 所有IE浏览器(ie6+)支持；但是IE8不能识别“*”和“_”的css hack；所以我们可以这样写hack */
[color:#000000;color:#00FF00; /* SF,CH支持 */
*color:#FFFF00; /* IE7支持 */
_color:#FF0000; /* IE6支持 */
}

其中：OP表示Opera，SA表示Safari，Ch表示Chrome；

主流浏览器的一些HACK

Frog — Wed, 20 May 2009 02:14:49 +0000

前段时间刚刚专门研究了的针对IE8的CSS hack(原文地址： http://www.css88.com/archives/1210 ),不过很多朋友还是问我一些其他浏览器的css hack，其实我还真的没有去研究过，今天有个朋友又问我了，我也称这个机会学习了一下。
主要hack如下：(转载请注明出处：WEB前端开发 http://www.css88.com/)
.test{
color:#000000; /* FF,OP支持 */
color:#0000FF\9; /* 所有浏览器IE浏览器(ie6+)支持；但是IE8不能识别“*”和“_”的css hack；所以我们可以这样写hack */
[color:#000000;color:#00FF00; /* SF,CH支持 */
*color:#FFFF00; /* IE7支持 */
_color:#FF0000; /* IE6支持 */
}
另外随着google Chrome和Safari浏览器的流行，找google Chrome和Safari CSS hack的人也不少。我也找了一下：

.body:nth-of-type(1) .CH{
color: #FF0000;/* 这是专门针对Chrome和Safari的CSS hack */}

做了个简单的页面，大家可以使用各个浏览器测试一下：http://www.css88.com/demo/csshack/csshack.html
其中：OP表示Opera，SA表示Safari，Ch表示Chrome；
原文地址： http://www.css88.com/archives/1265