我不確定你是否會認為這是對你的問題的完整答案,因為我知道你正在使用< td>在您的示例中,< td>之間存在一個差異.和< dd>或者< li>元素是< td>的事實.在不破壞< table>的情況下,元素不能與其周圍元素相抵消具體行為.但至少我可以回答你的第三個問題的一部分：
If it’s true that it’s not possible to define a CSS rule which creates the same format for both kinds of HTML…
事實并非如此,你總是可以渲染一個浮動：前面的偽元素,寬度為100％;設置,并設置兄弟的一半邊緣< p>它上面的元素.
dd {
border: 1px dashed lightblue; /* this line is for demonstration purposes only */
}
dd:before {
float: left;
content: "";
width: 100%;
margin: 0.5em;
}
An introductory sentence as a text node.
A further sentence as a paragraph.
An introductory sentence as a paragraph.
A further sentence as a paragraph.
這引入了一個空的“虛擬”段落,它只影響< dd>的直接文本節點.作為< p>元素只會執行their automatic margin collapsing magic而不是向下移動.我認為這證明至少可以定義一個CSS規則,它為這兩種HTML創建相同的格式.
這是如何工作的,或者至少我理解這是如何工作的. W3C在CSS規范中有一個例子,它告訴我們問題中的文本節點必須是anonymous block box,因為它是一個文本節點,在一個帶有display：block的框內呈現;設置,< dd>,它有一個帶display：block的兄弟;設置,< p>.
通過添加偽元素 – 在此匿名塊框內呈現(它必須是,因為否則它將永遠不會像內聯元素一樣,或者它可能呈現為兩個anonymous inline boxes,沒有包含塊框) – 但無論如何,我們最終得到兩個匿名內聯框(偽元素和文本節點).
下一步是獲取這些匿名內聯框中的第一個,偽元素,并通過向左浮動將其從正常流中取出,然后將其寬度設置為100％,并使其占據與高度匹配的高度兄弟&< p>的余量(我通過設置< p>的余量的一半來完成,但你可以通過設置與< p>的匹配的高度或下邊距來做同樣的事情.保證金).
現在前面的文本節點有一個人為的上邊距.問題仍然存在,為什么這不會影響< p>如果沒有前面的文本節點？我認為這是因為 – 因為沒有前面的文本節點 – 偽元素本身被渲染為應用它的元素內的空匿名塊框(作為偽元素,內容總是在應用它們的元素內部呈現),這與渲染空的< span>基本相同< p>之前的元素.
這是一個概念證明：
dd {
border: 1px dashed lightblue;
}
span {
float: left;
height: 1em;
width: 100%;
background-color: lightgray;
}
dd:not(:first-child)::before {
content: "";
float: left;
height: 1em;
width: 100%;
background-color: lightgray;
}
The dashed light blue line marks the paragraphs margin Box,the light grey Box is the span.
The dashed light blue line marks the paragraphs margin Box,the light grey Box is the pseudo element.
這個“人工邊緣”是一個左浮動的塊框(在偽元素的情況下是匿名塊框)在其包含元素內.如果他們需要,所有其他的塊盒都將向下移動(因為它們是根據W3C floating spec假設浮動盒子沒有為它們留下任何空間),這只發生在浮動盒開始超出它的邊緣時隱藏,并且它不會在這個特定問題的解決方案中發生,因為我特意將人工邊緣設置為與< p>的實際邊緣一樣高.
我認為秘密在于W3C浮動規范的這一部分,這有點難以理解：
Since a float is not in the flow,non-positioned block Boxes created
before and after the float Box flow vertically as if the float did not
exist. However,the current and subsequent line Boxes created next to
the float are shortened as necessary to make room for the margin Box
of the float.
A line Box is next to a float when there exists a vertical position
that satisfies all of these four conditions: (a) at or below the top
of the line Box,(b) at or above the bottom of the line Box,(c) below
the top margin edge of the float,and (d) above the bottom margin edge
of the float.
Note: this means that floats with zero outer height or negative outer
height do not shorten line Boxes.
If a shortened line Box is too small to contain any content,then the
line Box is shifted downward (and its width recomputed) until either
some content fits or there are no more floats present. Any content in
the current line before a floated Box is reflowed in the same line on
the other side of the float. In other words,if inline-level Boxes are
placed on the line before a left float is encountered that fits in the
remaining line Box space,the left float is placed on that line,
aligned with the top of the line Box,and then the inline-level Boxes
already on the line are moved accordingly to the right of the float
(the right being the other side of the left float) and vice versa for
rtl and right floats.
我理解這是指“在浮動框垂直流動之前和之后創建的非定位塊框,就像浮動不存在一樣”,因此< p> s,非定位塊框不應受到浮箱子.
但這并不意味著什么.相反,它指出,當盒子向左浮動時,在浮動盒子的右側創建一個線框,填充浮動盒子右側和容納盒子右側之間的空間.并且在該行框內部存在塊框,該框是隨后的< p>元件.如果那< p>元素可以適合滿足上述四個條件的空間,它將位于行框中的浮點旁邊.
由于浮點數設置為100％的寬度,因此< p>不適合浮動的盒子旁邊,它坐在它的線框內,向下移動到下一行,它以某種方式神奇地決定部分地遵守規則的第一部分：“之前創建的非定位塊盒和在浮動框垂直流動之后,好像浮動不存在“,這似乎只是邊緣的真實,因為只要浮動框超出邊距,塊框就會開始向下移動,也許是因為它位于還有一個線盒..
現在除了< td>之外的所有內容如果通過將包含內容的元素與其包含元素相抵消可以輕松完成,則可以輕松地將頂部添加的空間消失,這將非常簡單.
dd {
position: absolute;
margin-top: -1em;
}
dd:before {
float: left;
content: "";
width: 100%;
margin: 0.5em;
}
div {
position: relative;
/* everything below this line is for demonstration purposes only */
border-top: 1px dashed lightblue;
height: 80px;
}
An introductory sentence as a text node.
A further sentence as a paragraph.
An introductory sentence as a paragraph.
A further sentence as a paragraph.
我認為回答第二個問題,至少對于< dd>和< li>元素,甚至允許前一個文本節點中的內聯元素.
如果你想在< td>內進行此操作你必須開始管理< td>或< table>高度其他方式,因為你必須在< td>內使用絕對定位.并通過將表格單元格設置為display來阻止表格增長的默認表格行為：block; (或者通過在< td>中渲染一個額外的< div>并將其用作塊級元素,但這也會破壞默認的單元格增長行為).
table
{
width: 100%;
min-height: 80px;
float: left;
}
dd {
position: absolute;
margin-top: -1em;
}
dd:before {
float: left;
content: "";
width: 100%;
margin: 0.5em;
}
td {
position: relative;
display: block;
border-top: 1px dashed lightblue; /* this line is for demonstration purposes only */
}
An introductory sentence as a text node. A further sentence as a paragraph. |
An introductory sentence as a paragraph. A further sentence as a paragraph. |
