CSS FF与IE兼容性总结
CSS FF与IE兼容性总结是指在实际应用中遇到的CSS样式在FireFox(FF)和Internet Explorer(IE)浏览器之间的兼容性问题。由于FF和IE浏览器的渲染引擎不同,导致了许多CSS样式在两个浏览器中的表现不同。因此,了解FF和IE浏览器之间的兼容性问题非常重要。
一、超链接访问过后hover样式不出现的问题
在实际应用中,经常会遇到超链接被点击访问过后,hover样式就不出现的问题。这是因为浏览器对CSS伪类的解析顺序的不同所致。解决方法是改变CSS属性的排列顺序,使用LVHA顺序,即link-visited-hover-active顺序。
代码示例:
```css
<style type="text/css">
<!--
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
</style>
二、FireFox下如何使连续长字段自动换行
在FireFox浏览器中,使连续长字段自动换行可以使用word-wrap:break-word属性,但是这在IE浏览器中无效。解决方法是使用JavaScript插入换行符来解决。
代码示例:
```css
<style type="text/css">
<!--
div {
width: 300px;
word-wrap: break-word;
border: 1px solid red;
}
-->
</style>
<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<script type="text/javascript">
/*<![CDATA[*/
function toBreakWord(el, intLen) {
var obj = document.getElementById(el);
var strContent = obj.innerHTML;
var strTemp = "";
while (strContent.length > intLen) {
strTemp += strContent.substr(0, intLen) + "<br>";
strContent = strContent.substr(intLen, strContent.length);
}
strTemp += "<br>" + strContent;
obj.innerHTML = strTemp;
}
/*]]>*/
</script>
了解FF和IE浏览器之间的兼容性问题非常重要,了解这些问题可以帮助我们更好地编写跨浏览器兼容的CSS代码。