一些 hr 标签内部有间隙，而其他则没有

Question

我有一个 pen，它基本上是一个 todo 应用程序。待办事项实际上是 li 元素，其中包含 text、button 和 hr。其中一些 hr 内部有 个空格 而有些则没有。

图片：

HTML:

const j = $;

j(() => {
  let validify = txt => {
    if (txt.length > 0) {
      j('#ctn').append(`<li class='td'>${txt}<button class='td-btn'>Dismiss</button><hr/></li>`);
    }

    j('.td-btn').on('mouseenter', function() {
      console.log('added');
      j(this)
        .parent()
        .addClass('del');
      console.log(j(this).parent().attr('class'))
    }).on('mouseleave', function() {
      console.log('removed')
      j(this)
        .parent()
        .removeClass('del');
    }).on('click', function() {
      j(this).parent().css('display', 'none');
    });

    j('#addtd').val('');
  }
  validify('');

  j('#btn').on('click', () => {
    validify(j('#addtd').val());
  });
});

@import url("https://fonts.googleapis.com/css?family=Lato");
* {
  box-sizing: border-box;
  font-family: Lato;
}

body {
  margin: 0;
  padding: 3vh 7vw;
  background: #004D40;
}

#in-ctn {
  position: fixed;
  width: 86vw;
  height: 16vh;
  background: #388E3C;
  box-shadow: 0 6px 9px #272727;
  z-index: 2;
}

#btn {
  position: absolute;
  border-radius: 100%;
  outline: none;
  border: none;
  right: 7vh;
  top: 3vh;
  width: 10vh;
  height: 10vh;
  font: 500 8vh arial;
  display: inline-block;
  transition: 0.25s all;
  background: #CDDC39;
}

#btn:hover {
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.33);
  transform: scale(1.1);
}

#btn:active {
  transform: translateY(4px);
}

#addtd {
  position: absolute;
  outline: none;
  border: none;
  background: rgba(255, 255, 255, 0.33);
  width: 50vw;
  height: 6vh;
  top: 5vh;
  left: 5vw;
  font: 500 14pt Lato;
  padding: 0 10px;
}

#addtd::placeholder {
  color: #FFF;
}

#ctn {
  position: absolute;
  top: 27vh;
  width: 86vw;
  background: #388E3C;
  box-shadow: 0 6px 9px #272727;
  padding: 3vh 5vw;
  z-index: 1;
}

li.td {
  font: 500 20pt Lato;
  list-style: none;
  color: #FFF;
}

button.td-btn {
  float: right;
  outline: none;
  border: none;
  background: #E53935;
  height: 20px;
  position: relative;
  top: 25px;
  color: #FFF;
}

hr {
  border: 7px solid #9E9D24;
  padding: 0;
}

.del {
  color: #CDDC39 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>




<div id='main'>
  <div id='in-ctn'>
    <button id='btn'>+</button>
    <input type='text' id='addtd' placeholder='Enter a new Todo' />
  </div>
  <div id='ctn'>
    <li class='td'>
      Code a Todo App
      <button class='td-btn'>Dismiss</button>
      <hr/>
    </li>
    <li class='td'>
      Style the Elements
      <button class='td-btn'>Dismiss</button>
      <hr/>
    </li>
    <li class='td'>
      Debug some problems
      <button class='td-btn'>Dismiss</button>
      <hr/>
    </li>
    <li class='td'>
      Go for a walk
      <button class='td-btn'>Dismiss</button>
      <hr/>
    </li>
  </div>
</div>

谁能解释一下为什么会这样？

Answer 1

这个问题似乎与浏览器有关，因为它对大多数人都适用。可能您的浏览器具有 hr 元素的默认样式。然而，现在对表示性术语使用水平线是不好的做法。 Source

您可以在 li 元素上使用 border-bottom。如果要将边框定位在低于默认位置的位置，可以在 li 元素上使用 padding-bottom。您的 HTML 结构看起来也更清晰了。

例如，将您的 CSS 选择器 li.td 的样式更改为以下内容可以达到目的：

li.td {
  font: 500 20pt Lato;
  list-style: none;
  color: #CDDC39;
  border-bottom: 10px solid #9E9D24;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

如果您确实需要使用 hr 元素，您可以尝试删除所有默认边距，因为某些浏览器默认添加边距。为此，向元素添加以下样式：

margin: 0

这将导致

hr {
  border: 7px solid #9E9D24;
  padding: 0;
  margin: 0;
}

Answer 2

您是否通过编辑笔来解决问题？当查看你的笔预览时，所有 <hr> 标签都呈现出来，里面没有空的 space。

我唯一的建议是，在HTML <hr>中不需要明确关闭，除非你使用XHTML，然后你需要正确关闭标签 <hr />。由于你只是写 HTML，我会选择 <hr>.

Answer 3

这是由于 CSS 子像素渲染造成的。当您 zoom-in/out 浏览器时，重新缩放的元素将留下像 5.75px 等像素值。供应商决定如何处理它。

对于您的情况，最简单的解决方法（至少在 Chrome 中）是将边框半径取消为 0 像素，而不是将 hr 的高度设置为边框的两倍并为其提供背景颜色：

border: 0px solid #9E9D24;
padding: 0;
height: 14px;
background: #9E9D24;

一些 hr 标签内部有间隙，而其他则没有

Some hr tags have gaps inside them while other doesn't

html

javascript

css

codepen