html – 为什么q元素中的前导空格与其他内联元素的处理方式不同？

概述似乎在< 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 似乎在< q>内导致空白.始终保留元素(尽管标准化为单个空格),而大多数内联元素不是这种情况.例如,以下代码( jsFiddle)：

@H_301_11@<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添加到上面的小提琴：

@H_301_11@a::before,a::after { content: '"';}

使它们渲染相同.所以它似乎与CSS :: before选择器有关.

解决方法 根据 Chrome’s docs on default styles for HTML elements,< q>的默认样式element(quote)是：

@H_301_11@q::before { content: open-quote;}q::after { content: close-quote;}

正如您所注意到的,如果您将相同的样式应用于< a>元素(锚),你得到相同的结果：

https://jsfiddle.net/b6p60Lwd/

理解这一点的关键在于解释什么是:: before和:: after. According to MDN,它们创建一个伪元素,它是匹配元素的第一个(for :: before)或last(for :: after)子元素.所以你可以想象一个带有引号的内联元素被添加为每个< q>的第一个子元素.

例如：

@H_301_11@<br> a <span><span>"</span> b</span>

在b之前显示一个空格,同时：

@H_301_11@<br> a <span> b</span>

b之前没有显示空格.

你可以在这里看到它：

https://jsfiddle.net/b6p60Lwd/1/

总结

以上是内存溢出为你收集整理的html – 为什么q元素中的前导空格与其他内联元素的处理方式不同？全部内容，希望文章能够帮你解决html – 为什么q元素中的前导空格与其他内联元素的处理方式不同？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。