似乎 <q>
中的前导空格元素始终保留(尽管标准化为单个空格),而大多数内联元素并非如此。例如,以下代码 ( jsFiddle ):
<br> a <q>test</q> b <a href=#>test</a> c
<br> a <q> test</q> b <a href=#> test</a> c
<br> a <q>test </q> b <a href=#>test </a> c
<br> a <q> test </q> b <a href=#> test </a> c
在我测试过的所有现代浏览器(Chrome、FF 和 Edge)中都像这样呈现:
在第二行和第四行,<q>
以初始空格呈现,而 <a>
不是。这是为什么?
编辑:将以下 CSS 添加到上面的 fiddle 中:
a::before, a::after {
content: '"';
}
使它们呈现相同。所以它似乎与 CSS ::before
有关选择器。
最佳答案
根据 Chrome's docs on default styles for HTML elements , <q>
的默认样式元素(引用)是:
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
如您所见,如果您将相同的样式应用于 <a>
元素( anchor ),你会得到相同的结果:
body {
font-size: 200%;
}
q {
background-color: #AAF;
}
a {
background-color: #FAA;
}
a::before {
content: open-quote;
}
a::after {
content: close-quote;
}
<br> a <q>test</q> b <a href=#>test</a> c
<br> a <q> test</q> b <a href=#> test</a> c
<br> a <q>test </q> b <a href=#>test </a> c
<br> a <q> test </q> b <a href=#> test </a> c
理解这个的关键在于解释什么是::before
和 ::after
. According to MDN ,它们创建一个伪元素,它是匹配元素的第一个(对于 ::before
)或最后一个(对于 ::after
)子元素。所以你可以想象,一个内含引号的内联元素被添加为每个 <q>
的第一个子元素。 .
例如:
<br> a <span><span>"</span> b</span>
在b
前显示一个空格,同时:
<br> a <span> b</span>
不显示b
之前的空格.
你可以在这里看到它的实际效果:
body {
font-size: 200%;
}
q {
background-color: #AAF;
}
a, span {
background-color: #FAA;
}
<br> a <q>test</q> b <a href=#>test</a> c
<br> a <q> test</q> b <a href=#> test</a> c
<br> a <q>test </q> b <a href=#>test </a> c
<br> a <q> test </q> b <a href=#> test </a> c
<br> a <span><span>"</span> a</span>
<br> a <span> a</span>
关于html - 为什么 q 元素中的前导空格与其他内联元素的处理方式不同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39948348/