浏览器兼容问题

sp42a 2014-01-13 11:28:00

1828

分类专栏： DHTML & H5 CSS & LESS.js 文章标签： css

最后发布:2014-01-13 11:28:00首次发布:2014-01-13 11:28:00

本文链接：https://blog.csdn.net/zhangxin09/article/details/18217705

版权

HTML

ie中a链接失效的问题

一个a链接里面放个table，即为：a>table>tr>td>链接文字。结果不能点击。原因是：a链接中有个块元素，块元素中才是img，顺序是 a>块元素>img。这种顺序不行，如果换成块元素>a>img，就OK了。结论就是：在ie6、7、8中，如果a中有块元素或者强制成块的元素的话就不能点击，要调换顺序，即为：块元素>a>img。

解决办法：用js绑定table的click事件。

针对IE6,7,8的CSS hack

body{
         color:red; //所有浏览器
         color:orange/0  // 只针对IE8
         color:yellow\9; //IE8及以下
         *color:blue; //IE7及以下
         _color:gray; //IE6
}

<!--[if IE 6]>
      body{
              color:green; //IE6
      }
<![endif]-->

IE6 用户升级浏览器的提示

如图：

插入 HTML：

<!--[if IE 6]>
<!--ie6弹出层显示信息-->
<style type="text/css">
#popDiv {
	width:412px;
	background: #f0f0f6;
	border: 10px solid #e0e0e0;
	padding:0 0 10px 0;
	border-top:none;
	text-alig: left;
	font-size: 12px;
	z-index:99;
	left:50%;/*FF IE7*/
	top: 50%;/*FF IE7*/
	margin-left:-200px!important;/*FF IE7 该值为本身宽的一半 */
	margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/
	margin-top:0px;
	position:fixed!important;/*FF IE7*/
	position:absolute;/*IE6*/
	_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}
#popDiv a{text-decoration:none;color:#f00;}
#popDiv a:hover{color:#f60;}
#isclose{position:absolute;bottom:5px;right:6px;}
#isclose a{border:1px solid #e0e0e0;padding:2px 5px;background:#f0f0f6;}
#isclose a:hover{color:#f60;background:#fc6;}
#popDiv h1{font-size:12px;line-height:24px;background:#e0e0e0;line-height:30px;color:#333;}
#popDiv h2{font-size:12px;text-indent:24px;line-height:24px;color:#333;font-weight:normal;padding:10px;}
#popDiv p{line-height:24px;display:inline-block;text-indent:24px;}
</style>
<div id="popDiv" class="viewPhoto">
	<h1>中国物流商城网 友情提示：</h1>
	<h2>您使用的是较低版本浏览器，将导致无法使用本系统的部分功能。建议您使用 IE8.0 或其他较新版本浏览器，以便更好的感受本系统的各项特色功能及服务，感谢您对中国物流商城网的关心和支持。</h2>
	<p>技术支持热线：020-6996078</p>
	<p>更新 IE6 的原因，详见<a href="http://theie6countdown.cn/" target="_blank">《对Internet Explorer 6 说再见》</a>
	</p>
	<br /><br />
	<p id="isclose">
		<a href="http://www.microsoft.com/zh-cn/download/internet-explorer-8-details.aspx" target="_blank">下载 IE 8</a>
		<a href="#" οnclick="document.getElementById('popDiv').style.display='none';" id="acontinue">继续使用</a>
		<a href="javascript:window.close();" id="aClose">关闭窗口</a>
	</p>
</div>
<![endif]-->

隐藏元素获取高度问题，for All browsers.

当一个元素处于隐藏的状态，display:none
是不能获取其高度或者宽度的？
也就是 el.clientHeight=0/el.clientWidth=0,

IE 取得css属性的绝对像素值

for ie8 可以通过 offsetHeight 获取，
for ie7,要使元素大小发生变化，才能获取，如下例，要获取父级 td 元素的高度，怎么获取绝对像素值？

    //导入iframe时获取高度并适应  
    function iFrameHeight(ifm) {    
        if(window.navigator.isFF || window.navigator.isIE8)  
            ifm.height  = document.getElementById('tdtd').offsetHeight;  
          
        if(window.navigator.isIE7){  
            // ie6, ie7 不能通过 offsetHeight 来直接获取绝对的高度，getComputed() 也是返回 ifm.style.height ="auto"，于是……  
            document.getElementById('tdtd').height = "100%";  
            ifm.height  = document.getElementById('tdtd').offsetHeight - 30;  
            document.getElementById('tdtd').height = "";  
        }  
    }