顯示：運行在Chrome中丟失？

我試圖以創建語義和好看的元數據的名稱 - 值列表中使用display: run-in，鏈接纔可這樣：顯示：運行在Chrome中丟失？

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Run-in description list test</title> 
<style> 
dt { 
    font-weight: bold; 
    display: run-in; 
} 
dt:after { 
    content: ": " 
} 
</style> 
</head> 

<body> 

    <dl> 
    <dt>Subject</dt> 
    <dd>A Question</dd> 
    <dt>From</dt> 
    <dd>Mr Smith</dd> 
    <dt>Time</dt> 
    <dd>2013-08-05</dd> 
    </dl> 


</body> 
</html>

預期的結果是

主題：一個問題
來源：史密斯先生
時間： 2013年8月5日

你可以看它live。（實際上，使用display: run-in的想法是給我的伊恩·希克森，之後我就開始嘮叨，從XHTML 2.0 di元素。另外一種選擇是使用float，但附帶了很多的困難。）

直到最近，除了Firefox之外，它在每個現代瀏覽器都能很好地工作（也就是說，它在Internet Explorer，Google Chrome，Opera和Safari（我認爲）中都能很好地工作）。但最近我發現它不再適用於Google Chrome。

問題：谷歌瀏覽器是否已經放棄了對display: run-in的支持？有沒有其他方法可以以同樣的方式工作？

來源

2014-02-27 Andreas Rejbrand

我不知道Chrome支持display:run-in的任何變化，但該設置似乎一直不受歡迎。

Hixie一直反對<di>，我很明白爲什麼。 HTML是一種語義語言，其語義完全由dl/dt/dd定義。唯一的實際問題是表現性的，這使得它成爲一個CSS問題，而不是HTML問題。

不幸的是，那麼CSS的當前狀態似乎並不適合這項工作。對於dl/dt/dd以及許多類似的問題，我們確實需要一種機制將元素組包裝到一個僞元素中，然後它可以執行<di>的角色。

很顯然，目前的設置並不是display:run-in應該做的。話雖如此，在特定的測試情況下，可以實現與這個CSS同樣的效果：

dt { 
    font-weight: bold; 
    display: inline; 
} 
dt:after { 
    content: ": "; 
} 
dd { 
    display: inline; 
    margin:0; 
} 
dd:after { 
    content:'\0A'; 
    white-space:pre; 
}

來源

2014-02-28 00:50:56 Alohci

謝謝你的回答。我也同意Hixie的觀點，但是仍然缺乏合適的CSS機制，使得人們有點試圖去思考'di's。事實上，我在幾個月前嘗試了完全相同的CSS，但是IIRC我發現了這種方法的一些細微問題（比如使用'float'方法），所以當我瞭解到'磨合'時，我認爲我可以在不久的將來開始使用（只要FF會實施它）。但現在我想這絕不會發生。所以它可以是'float'或'\ 0A'。目前我使用'float'，但是我可能會更改爲'\ 0A'。 –

順便說一句，[MDN]（https://developer.mozilla.org/en-US/docs/Web/CSS/display）表示Google Chrome在版本32中放棄了對「試用」的支持。 –

我想提供一個不同的，更加明確的方法來解決。一個可以擴展到缺少display:run-in行爲的更一般情況。也就是說我使用h4 - >p流入過渡撰寫項目屬性的一個很好的格式化列表：

h4 { 
    font-weight: bold; 
    display: inline; 
} 
h4::after { 
    content: ": "; 
} 
h4 + p { 
    display: inline; 
} 
h4 + p::after { 
    content: '\0A'; 
    display: block; 
}

在這裏，我使用「立即兄弟」（+）CSS選擇器選擇立即之前p元素通過h4元素。如果h4後面跟着任何其他元素，它將在正常流程後顯示。

替代選擇器~將不選擇一個，而是選擇所述類型的所有元素，這不是通常所期望的來自插入行爲的，並且還將擴展到當前範圍中的所有相同類型的標籤而不管其他標籤混合標籤，這可能會完全破壞佈局。

來源

2017-09-19 11:31:00 AnrDaemon

顯示：運行在Chrome中丟失？

回答

相關問題