繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > IE下href 的 BUG问题
- CSS样式表
- CSS优先级规则的细节
- CSS失效，原来是和网页第一段代码有关
- 你真的了解CSS吗？你是属于哪个层次？
- 让样式表CSS代码更加专业规范
- 建议网页设计师用CSS制作网站导航菜单
- 简单学习css组合与CSS嵌套的写法
- CSS学习之css代码的简写的十条规则
- 条件CSS的介绍
- CSS教程:网页中多个样式表顺序问题
- CSS教程：网页版面设计无效的10个原因
- 页面重构工程师应该具有的技能和素质
- 选择正确DOCTYPE解决CSS在网页失效问题
- Opera中国的WEB标准课程
- 简单介绍Web Developer插件制作网页
- CSS布局带来的巨大影响:CSS display属性值
- 用div css模拟表格对角线
- IE Firefox在css中的差别 (部分)
- 不用js可以实现信息提示效果
- CSS解决未知高度的垂直水平居中自适应问题
- CSS cursor 属性 -- 鼠标指针样式效果
CSS样式表 中的 IE下href 的 BUG问题
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 190 ::
收藏到网摘: n/a
在浏览器 IE6 、IE7、Firefox2+、Firefpx3+、Opera9.6+、Safari3.1+中测试以下代码
复制代码 代码如下:
<div id="test">
<a href="#"> test </a>
</div>
<div id="result"></div>
<script type="text/javascript">
(function(){
var test = document.getElementById('test');
alert(test.innerHTML);
var result = document.getElementById('result');
result.innerHTML = test.innerHTML;
alert(result.innerHTML)
})();
</script>
结果会发现，在 IE6、IE7 浏览器中第二次弹出的 result.innerHTML 中的 A 元素的 href 值成为了绝对路径。
其实先人们早遇到这些问题（感谢 玉伯 提供的资料）：
在上面的文章中已提及了处理方案，就是在 IE 下使用 getAttribute( ‘href' , 2 ) 方法。 Microsoft 给此方法扩展了第二个参数，可设置为 0、1、2，如果设置为 2 ，则返回属性原始值。
脚本修正为：
复制代码 代码如下:
(function(){
var test = document.getElementById('test');
alert(test.innerHTML);
var result = document.getElementById('result');
result.innerHTML = test.innerHTML;
if(/*@cc_on!@*/0 ) { //if ie
var links1 = test.getElementsByTagName('a');
var links2 = result.getElementsByTagName('a');
for(var i = 0, len = links1.length; i < len; ++i ) {
links2[i].href = links1[i].getAttribute('href', 2);
}
}
alert(result.innerHTML);
})();
在寻找此问题的过程中还搜索到 Hedger Wang 发现的一个有趣的 BUG 问题：在 IE 中当重新设置新的 href 属性值时，如果链接文字含有 “http://” 或 “@” ，则其 innerHTML 将显示不正确，显示成设置的 href 属性。
解决方法（sHref 为要设置的 href 新值）：
复制代码 代码如下:
sHref = 'http://www.hedgerwow.com';
var isMSIE = /*@cc_on!@*/false;
if( isMSIE ){
sHref = ' ' + sHref; //add extra space before the new href
};
详细：《Internet Explorer might reset Anchor's innerHTML incorrectly when a new “href” is assigned》
评论 (0) All
