line-block的運用最小寬度的設置

2020-10-23 18:35:28

字體：大中小

來源：轉載

供稿：網友

網上找到的正規描述：
引用內容
這個值導致一個元素產生一個塊狀盒模型（block box），而本身作為單一的內聯盒模型（inline box）流動排列（flow），類似一個被替代的元素。Display值為inline-block的元素內部形成一個塊狀盒模型，而本身形成類似一個內聯的被替代元素
PS：可惜IE不支持，FF也不支持。HOHO～

IE解決方案：觸發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,個人主頁,無聊,神經,懶惰" />  <meta name="description" content="PRcss的個人主頁,無聊的,神經的,懶惰的..." />  <meta name="author" content="http://www.survivalescaperooms.com/"/>  <meta name="Copyright" content="本頁版權歸PRcss所有。All Rights Reserved" />  <title>line-block的運用：最小寬度的設置 - www.survivalescaperooms.com</title>  <style type="text/css"></style>  </head>  <body>  <p class="box">  <img src="https://www.jb51.net/article/pr.jpg" />  </p>  <p>測試</p>  </body>  </html>

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

.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 */

上一篇：網頁打開新窗口target=_blank不符合標準

下一篇：javascript橫排豎排標準選項卡效果代碼