关于firefox,opera,ie中超链接的兼容
今天重构发现一个兼容问题。
关于超链接,最严格的写法:
a { color: #000; text-decoration: underline;}
a:link { color: #000; text-decoration: underline;}
a:visited { color: #000; text-decoration: underline;}
a:active { color: #FF0; text-decoration:none}
a:hover { color: #FF0; text-decoration:none}
为了简化避免重复,一般这样写:
a,a:link,a:visited { color: #000; text-decoration: underline;}
a:active,a:hover { color: #FF0; text-decoration:none}
如果链接css都是一样的话,可以这样写:
a,a:link,a:visited,a:active,a:hover { color: #000; text-decoration: underline;}
(其中active基本没什么用,可以省去)
在ie下面,ok,没有问题,到了firefox,opera,出问题了,效果出不来,百思不得其解,后来慢慢调试,发现只需要分开写,firefox,opera即可正常:
.endr a { color: #930;}
.endr a:link { color: #930;}
.endr a:visit { color: #930;}
.endr a:hover { color: #930;}
看来上面的简写好像firefox,opera不适别,导致效果出不来,全部分开写就正常了。并且visit和link可以省去
.endr a { color: #930;}
.endr a:hover { color: #930;}
这样即可,不过这样在ie又出问题了,shit,ie不能省去link和visit,最后兼容的简写如下:
.endr a { color: #930;}
.endr a:link,.endr a:visit { color: #930;}
.endr a:hover { color: #930;}
link,visit只在ie下有用,简写形式也可以识别,在opera和firefox只需要a和a:hover即可,貌似a已经包含了link和visit。
- 相关文章
- IE6的双倍边距BUG - 2008-06-29
- 2008.5.19-2008.5.21 让网站变灰沉痛哀悼地震遇难者 - 2008-05-19
- 百度空间的圆角矩形 - 2008-02-21
- 理解background-position属性 - 2008-02-19
- css兼容ie5.x及以下特殊写法hack - 2008-02-18
- 鼠标滑过显示横向下拉菜单 - 2008-01-21
- ie7空格的间距要比ie6/firefox/opera的都要大 - 2007-11-29
- 各浏览器有序列表样式的兼容研究 - 2007-10-27
- ie下容器1px高度的解决方案 - 2007-10-27
- 用css来定义table的样式 - 2007-10-11
- 上一篇:对overflow:hidden的理解
- 下一篇:如何用CSS制作横向菜单











