兼容问题整理( 二)

兼容问题整理( 二)

1.超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不再具有hover和active,解决办法是改变css的排列顺序

 a:link{}
 a:visited{}
 a:hover{}
 a:active{}

2.游标手指
cursor:pointer可以同时在IE和FF中显示游标手指,hand仅在IE中可以
3.页面的最小宽度
min-width是一个非常方便的css命令,他可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而他实际上把width当做最小宽度来使,为了让这一命令在IE上也能使用,可以把一个div放在body下面,然后为div指定一个类

.container{ 
 min-width:600px; 
 width:expression(docunment.body.clientWidth<600?"600px":"auto") 
 } 

第一个min-width是正常的,但第二行的width使用了JavaScript,这只有IE才认得,这也会是你的HTML文档不太正规,它实际上通过JavaScript的判断来实现最小宽度
4.高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin或padding时,例:

p对象中的内容


css:

#box{background:#eee} 
#box p{margin-top:20px;margin-bottom:20px;text-align:center} 

解决办法:在p对象上下各加两个空的div对象
{height:0;overflow:hidden}或者给div加上border属性

5.css hack
什么是浏览器hack?
当我们使用不同的浏览器(Firefox IE6 IE7)访问同一个网站,或者页面的时候,会出现一些不兼容的问题,有的显示出来正常,有的显示出来不正常,我们在编写css的时候很恼火,刚修复了这个浏览器的问题,那个浏览器就有出现问题,而hack就是一种解决办法,能在一个css独立的写支持不同浏览器的样式
以下两种方法能解决几乎所有hack
1.!important(不是很推荐使用)
随着IE7对!important的支持,!important现在只针对IE6的hack(注意写法,记住该声明位置需要提前)
代码:

  #wrapper{ 
       width:100px!important; /*IE7+FF*/ 
       width:80px /*IE6*/ 
 } 

2.+html,*html是IE特有的标签,Firefox暂不支持,而+HTML又是IE7特有标签

 #wrapper{width:120px}/*Firefox*/ 
 *html#wrapper{width:80px}/*IE6*/ 
 *+html#wrapper{width:60px}/*IE7*/ 

注意+HTML对IE7 的hack必须保证html头部有如下声明:
`

你可能感兴趣的:(兼容问题整理( 二))