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

Question

我有一个 pen ，它基本上是一个待办事项应用。待办事项实际上是 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

这是由于 CSS 子像素渲染而发生的。当您放大/缩小浏览器时，重新缩放的元素将留下像 5.75px 等像素值。 vendor 决定如何处理它。

在您的情况下，最简单的解决方法(至少在 Chrome 中)是将边框半径取消为 0px，而不是将 hr 的高度设置为边框的两倍并为其提供背景颜色:

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