jquery - 边框下的白线

Question

添加到我的 CCS“#x img”后，我的图像失去了正常分辨率，现在它们在顶部/底部/左侧或右侧都有“白线”。

为了更好地查看它，请放大并查看左侧的图片。每张图片都有这个问题，我不知道如何解决它。尝试将高度/宽度/交换属性更改为 0.5/50%、0，但仍然没有。还尝试将我的一张照片的分辨率更改为更大，以查看它是否会填充这些白点，但没有。有什么想法吗？

#classic img {
background-image: linear-gradient(black, black);
border-radius: 75px;
height: 100%;
width: 100%;

http://jsfiddle.net/3dytbr3m/4/更准确地说。选中“结果”中的第一个框。没有向 jsfiddle 添加其他代码行，但第一行代码显示了问题的确切位置。

Answer 1

将 box-sizing: border-box 添加到 .option 中的所有 div。

$(document).ready(function() {
  $('#classic').mouseenter(function() {
    $('#classic img').stop().fadeTo('slow', 0.25, function() {
      if (!$('#classic span').length) // make it so we don't keep appending more text
      {
        $('#classic').append("<span>Classic</span>");
        $("#classic span").fadeTo('slow', 1);
      }
    });
  });

  $('#classic').mouseleave(function() {
    $('#classic img').stop().fadeTo('slow', 1, function() {
      $('#classic span').fadeTo('slow', 0, function() {
        $(this).remove();
      });
    });
  });
});

body {
  background-color: black;
  font-family: 'Lato', sans-serif;
}
#container {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
#logo {
  background-image: url("img/wowlogo.png");
  background-image-repeat: once;
  background-position: center;
  margin-left: auto;
  margin-right: auto;
  height: 208px;
  width: 475px;
}
#menu {
  margin-top: 200px;
  text-align: center;
  font-size: 40px;
  letter-spacing: 2px;
  height: 90px;
  background-image: url("img/bg.png");
  background-color: #2E2E2E;
  border-radius: 60px;
}
.option {
  float: left;
  text-align: center;
  font-size: 30px;
  padding-left: 75px;
  padding-right: 10px;
  letter-spacing: 2px;
}
#classic {
  float: left;
  color: #FFFDD0;
  font-weight: 900;
  height: 37px;
  width: 150px;
  border-radius: 75px;
  border: 2px solid #000000;
  cursor: pointer;
}
#classic img {
  background-image: linear-gradient(black, black);
  border-radius: 75px;
  height: 100%;
  width: 100%;
}
#classic span {
  opacity: 0;
  position: relative;
  top: -110%;
}
#tbc {
  float: left;
  padding-left: 5px;
  background-image: url("http://lorempixel.com/100/37");
  height: 37px;
  width: 100px;
  border-radius: 50px;
  border: 2px solid #003B04;
  cursor: pointer;
  color: #003B04;
}
#wotlk {
  float: left;
  padding-left: 5px;
  background-image: url("http://lorempixel.com/150/37");
  height: 37px;
  width: 150px;
  border-radius: 75px;
  border: 2px solid #368BC1;
  cursor: pointer;
  color: #368BC1;
}
#cataclysm {
  float: left;
  padding-left: 5px;
  background-image: url("http://lorempixel.com/190/37");
  height: 37px;
  width: 190px;
  border-radius: 95px;
  border: 2px solid #9C2A00;
  cursor: pointer;
  color: #9C2A00;
}
#mop {
  float: left;
  padding-left: 5px;
  background-image: url("http://lorempixel.com/95/37");
  height: 37px;
  width: 95px;
  border-radius: 50px;
  border: 2px solid #00C99A;
  cursor: pointer;
  color: #00C99A;
}
#wod {
  float: left;
  padding-left: 5px;
  background-image: url("http://lorempixel.com/110/37");
  height: 37px;
  width: 110px;
  border-radius: 55px;
  border: 2px solid #003B04;
  cursor: pointer;
  color: #003B04;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
  <div id="logo"></div>
  <div id="menu">Lore
    <br />
    <div class="option">
      <div id="classic"></div>
      <div id="tbc"></div>
      <div id="wotlk"></div>
      <div id="cataclysm"></div>
      <div id="mop"></div>
      <div id="wod"></div>
    </div>
  </div>
</div>