Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

前端学习 第十四天 浅谈 BR 标签[2] #18

Open
paddingme opened this issue Nov 30, 2014 · 1 comment
Open

前端学习 第十四天 浅谈 BR 标签[2] #18

paddingme opened this issue Nov 30, 2014 · 1 comment
Labels
Mu-Help-Plan

Comments

@paddingme
Copy link
Owner

前端学习 第十四天 浅谈 BR 标签[2]

昨天了解了 <br> 的语义和正确使用场景，今天咱们来了解下 <br>在各浏览器的表现，能不能使用 CSS 样式来改变其表现，能改变哪些样式，以及为什么只能改变这些样式，以及如何改变等问题。

<br>在各浏览器的表现

测试代码：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <title>BR DEMO</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    </style>
</head>

<body>
    <p>我是一段测试文字
        <br> 我来测试下 br 标签各浏览器表现
    </p>

</body>

</html>

chrome 34.0.1847.131 m

firefox 33.1.1

IE6

IE7

IE8

IE9

IE 11

综上我们可以得出结论：除了在 Firefox 下 <br> 宽度为0 高度为20px,其余各浏览器均为 宽高auto。

能否使用 CSS 样式来改变其表现

http://stackoverflow.com/questions/899252/can-you-target-br-with-css

BR 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.

由于 <br> 是个空元素，没有内容，只有少数的样式可以使用 如 clear 和position。当然可以为 <br> 设置 border, 但是你看不见。

If 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.

It seems, it has been already discussed on other forums. Extract from Re: Setting the height of a BR element using CSS:

[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.

br 的奇怪在于：一方面它没有被当作一个正常的元素,而是作为生成内容的实例,但另一方面它被视为正常的元素(有限的子集)的CSS属性被允许。

I also found a clarification in the CSS 1 specification (no higher level spec mentions it):

在 CSS 1 specification 中也有描述：

The 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.
当前CSS1属性和值不能描述的BR元素的行为。 在HTML中,词与词之间的BR元素指定一个换行符。 实际上,取而代之的元素是一个换行符。 CSS的未来版本可能处理添加和替换内容,但CSS1-based格式器必须BR的特别对待。

现在的 CSS1 属性和值不能描述 BR 元素的值。HTML中， 在词与词之间 BR 指定一个折行。实际上其作用被一个换行符取代。CSS的未来版本可能处理添加和替换内容,但CSS1-based格式器必须对 BR 特别对待
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.

In theory, HTML BR elements should also be fully styleable. In other words, anything you can apply to EM should also work on BR elements!

.ba { width: 32px; height: 32px; border: 10px solid lime; background: fuchsia; }

Before
After

.bb { display: none; } /* So should not break line! */
Before After

Note. The UA stylesheet should use something along the lines of the following to support this element.

BR:before { content: "\A" }
@paddingme
Copy link
Owner Author

待修改 继续添加完善

@paddingme paddingme mentioned this issue Nov 30, 2014
Open
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Mu-Help-Plan
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@paddingme