国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > HTML > 正文

當ie7不認!important之后 [布局的解決辦法]

2020-10-23 18:44:54
字體:
來源:轉載
供稿:網友
在IE7之前,我們在布局時常用!important來解決IE和FF之間的差別; 但是在IE7出來之后,!important對IE7就不起作用了,而有些時候IE7的解釋方法又與FF和IE6不同;這時新的問題就出現了;用!important可以解決IE6但是解決不了IE7; 這樣在不同的瀏覽器中看到的同一個網頁的效果就不同了;

這是前天作布局時的一個問題;可以先看一下效果;http://www.zishu.cn/blogview.asp?logID=553 

或者運行一下下邊的代碼也可以同樣看到效果:
復制代碼 代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>zishu.cn test</title>
<style>
body{ font-size:12px; line-height:1.8; font-family:Verdana, "宋體", Arial,Sans; text-align:center; background:#FFF; color:#666; margin:50px; padding:0; list-style:none; }
a:link,a:visited{color:#000099; text-decoration: underline;}
a:hover,a:active{color:#000;text-decoration: none;}
#zishu_test li{ float:left; width:14%;text-align:center; margin:0 auto; list-style:none }
#zishu_test li a{border-right:1px solid #fff;border-bottom:1px solid #fff; width:100px; height:110px; background:#fff;display:block; padding-top:10px; margin:auto}
#zishu_test li img{ width:75px; height:75px; display:block; text-align:center; margin:auto; background:#FFF; padding:3px; border:1px solid #D8A18B;}
#zishu_test li span{display:none;}
#zishu_test li a:hover span{ margin-top:-10px;display:block; border-bottom:1px solid #666; border-right:1px solid #666; background:#FA9000; width:100px; color:#FFF; position:absolute; } 
* html #zishu_test li a:hover span {margin-left:-8px; } /* IE6 */ 
*+html #zishu_test li a:hover span {margin-left:-8px; }/* IE7*/ 
#zishu_test li a:hover{ border-right:1px solid #D8A18B;border-bottom:1px solid #D8A18B; width:100px; height:110px; background:#F5F5F5;display:block; padding-top:10px;} 
</style>
</head>
<body>
<div id="zishu_test">
  <ul>
    <li><a >pixu</a></li>
    <li><a >秀才</a></li>
    <li><a >透露</a></li>
    <li><a >LIVID</a></li>
    <li><a >老孟</a></li>
    <li><a >小玉</a></li>
    <li><a >pixu</a></li>
  </ul>
</div>
</body>
</html>

在這個例子中,如果我把
 程序代碼
*+html #zishu_test li a:hover span {margin-left:-8px; }/* IE7*/ 
這行刪除;那么在IE7中;就會有差別了;

為了解決這個問題,我看了;http://www.blueidea.com/tech/site/2006/3626.asp 里邊的一種方法; 但是如果程序員和布局人不是同一個人的話;這樣的方法很不好控制; 于是才有了下邊的方法;

以下是代碼; 
 程序代碼
復制代碼 代碼如下:

* html #zishu_test li a:hover span {margin-left:-8px; } /* IE6 */  
*+html #zishu_test li a:hover span {margin-left:-8px; }/* IE7*/  

這是針對IE6和IE7的兩種方法;
“*+html”被ie7與ie5.01所使用,而區分ie7與ie5.01又有很簡單的方法,便是important,把important寫在前面,這樣才能形成了單獨針對ie7 hack的方法了。

比如:

*+html div.IE7 { 
width:200px; !important; 
width:100px;
}
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 微山县| 黑山县| 崇明县| 股票| 余江县| 普兰店市| 定西市| 会东县| 阿拉善右旗| 乐业县| 宜宾市| 精河县| 华阴市| 新龙县| 宁强县| 建水县| 霍邱县| 平山县| 资阳市| 龙江县| 长宁县| 赞皇县| 四子王旗| 吉隆县| 清原| 虎林市| 改则县| 龙门县| 奎屯市| 舒城县| 张北县| 大邑县| 家居| 张家界市| 合川市| 万荣县| 福建省| 文水县| 略阳县| 确山县| 民权县|