HTML5中CSS的寬度設置百分比無效,以及禁用important的方法

        最近在研究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像素,這樣就能夠完美解決了。

        不過有一個問題,不要用百分比,百分比無論你設置多少,都是不生效的,因為瀏覽器不能界定。

timg.jpg

        下面再附上一點網上找的乾貨:

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

(0)
彬彬筆記彬彬筆記
上一篇 2020年3月19日
下一篇 2020年3月19日

相關推薦

發表回復

登錄後才能評論
蜀ICP備14017386號-13