IE6和IE7定位的相容問題簡單介紹:定位的瀏覽器相容性問題很小,就是IE6和IE7對z-index屬性的解析上有所差別,並且這兩個版本的瀏覽器在中國存活的估計也不會太長了,所以關於這個相容性問題有興趣的朋友可以參閱以下本章節,下麵就是一段關於此問題的實例代碼。代碼如下:螞蟻部落 以上代碼在I...
IE6和IE7定位的相容問題簡單介紹:
定位的瀏覽器相容性問題很小,就是IE6和IE7對z-index屬性的解析上有所差別,並且這兩個版本的瀏覽器在中國存活的估計也不會太長了,所以關於這個相容性問題有興趣的朋友可以參閱以下本章節,下麵就是一段關於此問題的實例代碼。
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .box{ width:100px; height:100px; position:relative; } .top{ width:50px; height:250px; background:red; position:absolute; z-index:10 } .bottom{ width:50px; height:60px; background:blue; position:absolute; z-index:5; } </style> </head> <body> <div class="box"> <div class="top"></div> </div> <div class="box"> <div class="bottom"></div> </div> </body> </html>
以上代碼在IE7和IE7以下瀏覽器與其他瀏覽器的表現不同.
IE7和IE6:是藍色覆蓋紅色
其他瀏覽器:紅色覆蓋藍色。
具體原理這裡就不多介紹了,可以參閱下麵兩篇文章:
1.z-index屬性用法可以參閱CSS的z-index屬性用法詳解一章節。
2.IE7下z-index問題可以參閱z-index在IE6和IE7的相容性問題一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13044
更多內容可以參閱:http://www.softwhy.com/divcss/