溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

CSS中瀏覽器對尺寸和寬高解釋差異怎么辦

發(fā)布時間:2021-10-12 14:06:28 來源:億速云 閱讀:118 作者:小新 欄目:移動開發(fā)

小編給大家分享一下CSS中瀏覽器對尺寸和寬高解釋差異怎么辦,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

先看一個例子

代碼如下:


<!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=gb2312&Prime; />
<title>無標題文檔</title>
<style>
#m{height:300px;width:300px;background:#ccc}
#a{float:left;height:100px;width:100px;background:#f00;}
#b{float:left;height:100px;*height:110px;_height:120px;width:100px;background:#0f0;}
#c{clear:both;height:100px;width:100px;*width:100px;_width:120px;background:#00f;}
</style>
</head>
<body>
<div id=”m”>
<div id=”a”></div>
<div id=”b”></div>
<div id=”c”></div>
</div>
</body>
</html>


在這里,height我分別定義了三個,
第一個正常定義,在所有瀏覽器中都會生效;
第二個定義在前邊加了一個*號,這個在IE6,IE7中會正常識別為height屬性,但是火狐和IE8會認為這是一個錯誤語法,被忽略,而根據先后執(zhí)行的順序,在IE6和IE7中帶*號的height被執(zhí)行,那么第一個正常height失效(或者說被覆蓋);
第三個height在前邊加了一個下劃線,下劃線只有IE6認為是有效的height屬性,而IE7 IE8和火狐都視為”_height”屬性是一個不存在的屬性,所以不予執(zhí)行,而IE6則將其執(zhí)行。這樣前兩個height在IE6中時就被帶下劃線的height覆蓋。

那么,通過這樣一個例子,您應該了解,如果我們想在不通的瀏覽器中分別設置一個元素不通的高度的時候,就可以使用 * 和 _ 兩個符號來協(xié)助定義。同時我們也了解了,微軟是一個對錯誤容忍度多高的企業(yè)呀!.呵呵。

不過,如果把這個例子的前邊兩行文檔類型和命名空間的聲明取消掉的話 帶下劃線的height也會被正常顯示。

width的設置是相同的。

我們在實際的工作中,更多的會遇到瀏覽器們對margin屬性解釋的不一樣,那么這時星號和下劃線就能夠幫上大忙。

以上是“CSS中瀏覽器對尺寸和寬高解釋差異怎么辦”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業(yè)資訊頻道!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

css
AI