注:FF=FireFox OP=Opera
手形光标. cursor: pointer. 而hand 只适用于 IE.
针对FF IE6 IE7的css样式
#color {color: #FF0000;} /* FF */
* html #color {color: #0000FF;} /* IE6 */
*+html #color {color: #00FFFF;} /* IE7 */
css布局中的居中
body{text-align:center;}
#center{margin-left:auto; margin-right:auto;}
在父级元素定义text-align:center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在FF,OP中不能居中。解决办法就是在子元素定义时候设定时再加上“margin-left:auto; margin-right:auto;”
浮动ie产生的双倍距离
#box{float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素).
Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素).
清除浮动
.hackbox{display:table; //将对象作为块元素级的表格显示}或者.hackbox{clear:both;}
或者加入:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏览器支持,
所以并不影响到IE/WIN浏览器。这种的最麻烦的……#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden;}
属性选择器(这个不能算是兼容,是隐藏css的一个bug)/*作用与FF OP IE7*/
p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
IE捉迷藏
当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。
解决办法:对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。
高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin或paddign时。
例: <div id=”box”>
<p>p对象中的内容</p>
</div>
CSS:#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解决方法:在P对象上下各加2个空的div对象CSS代码:.hbox{height:0px;overflow:hidden;}或者为DIV加上border属性。