line-block的運(yùn)用最小寬度的設(shè)置

更新時(shí)間：2008年05月14日 20:25:52 作者：

line-block：本身是內(nèi)聯(lián)盒模型的存在，又具備塊狀盒模型的特性。很好很強(qiáng)大的東西啊～

網(wǎng)上找到的正規(guī)描述：
引用內(nèi)容
這個(gè)值導(dǎo)致一個(gè)元素產(chǎn)生一個(gè)塊狀盒模型（block box），而本身作為單一的內(nèi)聯(lián)盒模型（inline box）流動(dòng)排列（flow），類似一個(gè)被替代的元素。Display值為inline-block的元素內(nèi)部形成一個(gè)塊狀盒模型，而本身形成類似一個(gè)內(nèi)聯(lián)的被替代元素
PS：可惜IE不支持，F(xiàn)F也不支持。HOHO～

IE解決方案：觸發(fā)IE的layout，從而使該元素具備類似line-block的特性。

FF解決方案：使用moz專屬屬性：display::-moz-inline-box;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <meta name="keywords" content="PRcss,xhtml,html,css,js,book,個(gè)人主頁,無聊,神經(jīng),懶惰" />  <meta name="description" content="PRcss的個(gè)人主頁,無聊的,神經(jīng)的,懶惰的..." />  <meta name="Author" content="PRcss,qq:50198763" />  <meta name="Copyright" content="本頁版權(quán)歸PRcss所有。All Rights Reserved" />  <title>line-block的運(yùn)用：最小寬度的設(shè)置 - www.dhdzp.com</title>  <style type="text/css"></style>  </head>  <body>  <p class="box">  <img src="pr.jpg" />  </p>  <p>測試</p>  </body>  </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

.box { display:inline; zoom:1; min-width:400px; width:auto!important; width:400px; clear:right; border:1px solid #000; background:#ccc; }
html:lang(zh-CN) .box { display:-moz-inline-box; } /* moz-ff */