为什么 HTML 中的 <hr> 与 CSS 不同？答案

【问题标题】：Why is <hr> given a thickness in HTML different than CSS?为什么 HTML 中的 <hr> 与 CSS 不同？
【发布时间】：2013-12-28 22:28:17
【问题描述】：

我有一个带有内联 CSS 的 HTML 文档，我的教授要求在 head 标记中包含 CSS，并且与带有内联 CSS 的原始 HTML 具有相同的渲染效果。我想我已经完成了，但不知何故，带有内联 CSS 的 HTML 中的 <hr> 看起来比另一个更厚。

我已经尝试添加 height: 声明属性，但它呈现的比我想要的还要厚。

原始 HTML：http://jsfiddle.net/2k66T/

修改后的 HTML：http://jsfiddle.net/dd63m/

编辑：这是教授的指示；

编写一个 CSS 文档以定义以下 web 的样式页面（我将其称为“原始 HTML”）以正确的方式。在原始文件中添加和删除页面所有你认为是必要的。使用在线验证器万维网联盟，以确保您的工作完成标准。

【问题讨论】：

您的查询是什么？这是你想要的输出吗jsfiddle.net/dd63m/6
@Amarnath 我希望修改后的 HTML 类似于带有内联 CSS 的原始 HTML
你检查过我在 cmets 中的小提琴吗jsfiddle.net/dd63m/6

标签： html css inline

【解决方案1】：

真正的问题是……你为什么要使用 HR？

让我们在包裹您的徽标图像的 div 上渲染一个边框。

拉小提琴！ - http://jsfiddle.net/dd63m/11/

更新小提琴 - http://jsfiddle.net/8VTd8/3/

我已为包装您的徽标的 div 指定了徽标 ID。我删除了 br 中断标签，我们可以在 CSS 中应用边距。不再使用字体标签。

HTML

  <h1>MyTSC</h1>

<div id="logo"> 
  <a href="http://www.tsc.edu"><img src="./img/TSCLogo.jpg" alt="TSC"></a>
</div>


<h2>My courses for Fal 2013</h2>
<ul>
 <li>COSC 4330 Computer Graphics</li>
 <li>IMED 1416 Wed Design I</li>
 <li>ITNW 2413 Networking Hardware</li>
</ul>

logo div 目前是 300px 宽，改成你想要的。注意：边距：0 自动；本质上，这是以您的 div 为中心。 margin-bottom 用于创建那些额外的空间。边框应用于您的徽标 div，在浏览器中提供一致的线条。

CSS

body{
  background-color: grey;
  color: white;
}
h1{
  text-align: right;
margin-bottom: 30px;
}
div{
  text-align: center
}

ul{
  font-style: italic;
}

#logo { width: 300px; margin: 0 auto; border-bottom: solid 1px #FFF; }
#logo img { margin-bottom: 30px;}

【讨论】：

请记住，您可以通过在 CSS 中指定边距（例如 margin-bottom: 20px）来轻松应用空间。不需要 br 标签。
谢谢！我留下<br /> 和<hr> 标签的原因是因为我没有意识到我可以用CSS 完成这个。不知何故，我忽略了它。我现在唯一关心的是尺寸。由于我使用<br /> 将图像与列表分开，我现在如何使用 CSS 实现相同的距离？我添加了分配说明，因为不知何故我认为他希望获得与带有内联 CSS 的原始 HTML 相同的结果。
这是我修改后的文件以及您的建议：jsfiddle.net/8VTd8 - 尽管断线标签已经消失，但不知何故，我觉得这比只使用断线更复杂标签。也许我自己把事情复杂化了？那么同时我要提醒自己<br />应该用于分隔文本而不是内容stackoverflow.com/questions/3937515/…
我给你介绍em单位！ :D 在你原来的小提琴中，你有两个<br> 标签和一个<hr>。每一个都给你三行。在这个例子中，3 ems 是一样的。看看这个小提琴：http://jsfiddle.net/8VTd8/1/看看this for more information on ems. I can't explain them properly
再一次，看看这个小提琴：http://jsfiddle.net/8VTd8/1/ 的 em 例子。我在之前的评论中发布了错误的链接。

【解决方案2】：

在你的 CSS 中添加 background: white; 而不是 color:white

喜欢这个

hr{
  width: 50%;
  height: 3px;
  background: white;
}

【讨论】：

我知道不同的浏览器呈现 HTML 文档的方式不同，但是否可以控制它们呈现 hr 的方式？ IE 的渲染方式与 FireFox 不同。我什至可以注意到hr 中的内部阴影
background:white 或 background-color:white 将始终适用于任何浏览器。

【解决方案3】：

它们都有相同的高度，默认颜色（未指定颜色）的高度具有渐变效果，因此看起来有点薄。

测试小提琴的代码

<hr width="50%" color="black">
<br />
<br />
<hr>
<br />
<br />
<hr id="test">

Js Fiddle

【讨论】：