René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"前端学习 第十四天 浅谈 BR 标签[2]","articleBody":"前端学习 第十四天 浅谈 BR 标签[2]\n\n昨天了解了 `\u003cbr\u003e` 的语义和正确使用场景，今天咱们来了解下  `\u003cbr\u003e`在各浏览器的表现，能不能使用 CSS 样式来改变其表现，能改变哪些样式，以及为什么只能改变这些样式，以及如何改变等问题。\n## `\u003cbr\u003e`在各浏览器的表现\n\n测试代码：\n\n``` html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"zh-cmn-Hans\"\u003e\n\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eBR DEMO\u003c/title\u003e\n    \u003cstyle\u003e\n    * {\n        margin: 0;\n        padding: 0;\n    }\n    \u003c/style\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n    \u003cp\u003e我是一段测试文字\n        \u003cbr\u003e 我来测试下 br 标签各浏览器表现\n    \u003c/p\u003e\n\n\u003c/body\u003e\n\n\u003c/html\u003e\n\n```\n\nchrome 34.0.1847.131 m\n![](http://paddingme.qiniudn.com/chrome.PNG)\n\nfirefox 33.1.1\n![](http://paddingme.qiniudn.com/firefox.PNG)\n\nIE6\n![](http://paddingme.qiniudn.com/IE6.PNG)\nIE7\n![](http://paddingme.qiniudn.com/ie7.PNG)\nIE8\n![](http://paddingme.qiniudn.com/ie8.PNG)\nIE9 \n![](http://paddingme.qiniudn.com/IE9.PNG)\n\nIE 11\n![](http://paddingme.qiniudn.com/ie11.PNG)\n\n综上我们可以得出结论：除了在 Firefox 下 `\u003cbr\u003e` 宽度为0 高度为20px,其余各浏览器均为 宽高auto。\n## 能否使用 CSS 样式来改变其表现\n\nhttp://stackoverflow.com/questions/899252/can-you-target-br-with-css\n\nBR generates a line-break and it is only a line-break. As this element has no content, there are only few styles that make sense to apply on it, like clear or position. You can set BR's border but you won't see it as it has no visual dimension.\n\n由于 `\u003cbr\u003e` 是个空元素，没有内容，只有少数的样式可以使用 如 `clear` 和`position`。当然可以为 `\u003cbr\u003e` 设置 border, 但是你看不见。\n\nIf you like to visually separate two sentences, then you probably want to use the horizontal ruler which is intended for this goal. Since you cannot change the markup, I'm afraid using only CSS you cannot achieve this.\n\nIt seems, it has been already discussed on other forums. Extract from Re: Setting the height of a BR element using CSS:\n\n[T]his leads to a somewhat odd status for BR in that on the one hand it is not being treated as a normal element, but instead as an instance of \\A in generated content, but on the other hand it is being treated as a normal element in that (a limited subset of) CSS properties are being allowed on it.\n\n\u003e br  的奇怪在于：一方面它没有被当作一个正常的元素,而是作为生成内容的实例,但另一方面它被视为正常的元素(有限的子集)的CSS属性被允许。\n\nI also found a clarification in the CSS 1 specification (no higher level spec mentions it):\n\n在 CSS 1 specification 中也有描述：\n\nThe current CSS1 properties and values cannot describe the behavior of the ‘BR’ element. In HTML, the ‘BR’ element specifies a line break between words. In effect, the element is replaced by a line break. Future versions of CSS may handle added and replaced content, but CSS1-based formatters must treat ‘BR’ specially.\n当前CSS1属性和值不能描述的BR元素的行为。 在HTML中,词与词之间的BR元素指定一个换行符。 实际上,取而代之的元素是一个换行符。 CSS的未来版本可能处理添加和替换内容,但CSS1-based格式器必须BR的特别对待。 \n\n\u003e 现在的 CSS1 属性和值不能描述 BR 元素的值。HTML中， 在词与词之间 BR 指定一个折行。实际上其作用被一个换行符取代。CSS的未来版本可能处理添加和替换内容,但CSS1-based格式器必须对 BR 特别对待\n\u003e Grant Wagner's tests show that there is no way to style BR as you can do with other elements. There is also a site online where you can test the results in your browser.\n\nIn theory, HTML BR elements should also be fully styleable. In other words, anything you can apply to EM should also work on BR elements!\n\n.ba { width: 32px; height: 32px; border: 10px solid lime; background: fuchsia; }\n\nBefore\nAfter\n\n.bb { display: none; } /\\* So should not break line! */\nBefore After\n\nNote. The UA stylesheet should use something along the lines of the following to support this element.\n\n   BR:before { content: \"\\A\" }\n","author":{"url":"https://github.com/paddingme","@type":"Person","name":"paddingme"},"datePublished":"2014-11-30T17:46:36.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1},"url":"https://github.com/18/Learning-JavaScript/issues/18"}