我有一个pen,基本上是一个待办事项应用程序。待办事项实际上是具有文本,libuttonhr元素。他们中有些人在hr中有空格,而有些人则没有。

图片:
javascript - 有些hr标签内部有空隙,而其他则没有-LMLPHP

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>





谁能解释我为什么会这样?

最佳答案

这是由于CSS Sub像素渲染而发生的。
当您放大/缩小浏览器时,重新缩放的元素将剩下5.75px等像素值。供应商决定如何处理。

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

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

10-05 20:52
查看更多