最近在研究17模板的那個WAP獨立版程序第二套原創模板，發現有一個問題，就是首頁的那個封面在uc瀏覽器的情況下存在錯位嚴重的問題，在谷歌瀏覽器的手機模式下調試，也是一樣的問題，看樣子是高度沒有限制好，我就想着把高度也進行限制百分比，或者限制像素，可是實際中發現，都不頂用，用谷歌瀏覽器的開發模式下發現，無論怎麼調，height的數值都被限制了，而且是在important中進行了限制，可是我通過查看css文件，根本沒有看到important在哪個地方。
通過谷歌模式的調試，我把height進行了更改，圖片的錯位現象就得到了改正，這樣就發現了問題，還是在寬度的問題下，然後更改了又被important限制，我就想能不能夠進行限制了，百度了一下，果然能夠進行限制，只需要在後面加！ important就行，經過測試果然能夠進行更改height了，具體的可以看看下面的代碼。
比如我有個代碼是這樣的 #tj img{width:100%;}，我想先進行限制了，然後添加width的限制，可以更改為這樣#tj img{width:100%;height: 200px ! important;}，這一個的意思就是，首先把important的屬性禁掉，然後設置height的數值為200像素，這樣就能夠完美解決了。
不過有一個問題，不要用百分比，百分比無論你設置多少，都是不生效的，因為瀏覽器不能界定。
下面再附上一點網上找的乾貨：
CSS的原理：
我們知道，CSS寫在不同的地方有不同的優先級， .css文件中的定義 < 元素style中的屬性，但是如果使用!important，事情就會變得不一樣。
首先，先看下面一段代碼：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>測試Css中的!Important區別</title>
</head>
<style type="text/css">
.testClass{
color:blue !important;
}
</style>
<body>
<div class="testClass" style="color:red;">
測試Css中的Important
</div>
</body>
</html>
雖然元素的style中有testClass類的定義，但是在上面的css定義中的用!important限定的定義卻是優先級最高的，無論是在ie6-10或者Firefox和Chrome表現都是一致的，都顯示藍色。
這種情況也同時可以說明ie6是可以識別!important的，只是這個是ie6的一個缺陷吧。如果寫成下面的樣式，ie6是識別不出來的：
.testClass{
color:blue !important;
color:red;
}
這樣，在ie6下展示的時候會顯示成紅色。
當然，也可以通過以下方式來讓ie6識別：
.testClass{
color:blue !important;
}
.testClass{
color:red;
}
通過以上方式也是可以讓ie6顯示成藍色的。
以上實例說明使用!important的css定義是擁有最高的優先級的。只是在ie6下出了一點小的bug，注意書寫方式一般可以輕鬆避開的。
有什麼問題可以在下面進行留言，大家一起進行學習交流。
發布者：彬彬筆記，轉載請註明出處：https://www.binbinbiji.com/zh-hant/css/1918.html
