CSS Cross-Browser Inline-Block

時間 2019-12-17

標籤 css cross browser inline block 欄目 CSS 简体版

原文原文鏈接

低版本的IE,火狐不支持 Inline-Block 屬性，想要達到目的咱們須要多作一些額外的工做，css

參考頁面爲：https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/html

<ul>
    <li>
        <h4>This is awesome</h4>
        <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
        alt="lobster" width="75" height="75"/>
    </li>
...
<ul>

<style>
    li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: inline-block;
        margin: 5px;
    }
</style>

li 標籤裏面不要直接寫文本字符串須要用編標包裹，否則inline 會出現奇怪現象，離左邊距離有問題，如圖1web

用div包裹恢復正常瀏覽器

<html>
<head>
	<title></title>
<style type="text/css">
body{
	margin:0 0;
	padding:0 0;
	font-size:14px;
	text-decoration:none;
}	
ul {
 margin :0 
 padding:0
font-size: 0;
}
li{
min-height:50px;
width:100px;
background-color:#c90;
border-bottom:1px dotted red;
display:inline-block;
list-style-type: none;
}
</style>
</head>
<body>
<div>
	<ul>
	<li><div>1</div></li>
	<li><div>1</div></li>
	<li><div>1</div></li>
	<li><div>1</div></li>
	<li><div>1</div></li>
	<li><div>1</div></li>
	<li><div>1</div></li>
	<li><div>1</div></li>
	<li><div>1</div></li>
	<li><div>1</div></li>
	<li><div>1</div></li>
	<li><div>1</div></li>
	<li><div>1</div></li>
	<li><div>1</div></li>
	<li><div>1</div></li>
	<li><div>1</div></li>
	<li><div>1</div></li>
	<li><div>1</div></li>
	<li><div>1</div></li>
	<li><div>1</div></li>
	</ul>
<div>
</body>
</html>

Firefox 2 不支持inline-block 可是他支持火狐獨有的display 屬性：-moz-inline-stack 這個屬性和inline-block 很像，若是咱們把他放在display:inline-block 前面，當火狐2瀏覽器遇到的時候會忽略inline-block 而保持-moz-inline-stack，由於他自己不支持inline-block屬性　，若是瀏覽器支持display:inline-block 那麼他就會忽略前面的-moz-inline-stack佈局

 li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
    }

　IE 6，IE7 不支持display:inline-block屬性，IE 元素haslayout屬性，不少bug 因爲IE 此屬性致使，IE6，7低版本瀏覽器，width,height屬性不能有效觸發haslayout 屬性，是有些元素不具備佈局。spa

可是zoom 屬性老是能觸發IE haslayout 屬性。IE 支持display:inline,內聯元素，和其餘瀏覽器不一樣的是 IE haslyout=-1(有佈局的時候),添加display:inline,至關於其餘瀏覽器的display:inline-blockhtm

IE 6 不支持min-height屬性，咱們要設置_height:250px,元素在IE 下的高度，_height:250px 在其餘瀏覽器中將被忽略。blog

因此最終字符串

li{
min-height:50px;
width:100px;
background-color:#c90;
border-bottom:1px dotted red;
display:-moz-inline-stack;
display:inline-block;
list-style-type: none;
vertical-align:top;
zoom:1;
*display:inline;
_height: 250px;/*IE 6 不支持min-height:250px;其餘瀏覽器會忽略_height: */
       
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。