爲什麼顯示：表格從圖像中減去1個像素？

Question

我需要的是垂直排列文本。我將display：table添加到圖像，但是這會使圖像縮短1px。爲了顯示我的意思，我添加了display：table到懸停狀態，這樣你就可以看到會發生什麼。爲什麼會發生？

.wrapper { 
 
    margin: 0 auto; 
 
    max-width: 940px; 
 
    background: #EBEBEB; 
 
} 
 
.border { 
 
    border-radius: 4px; 
 
} 
 
.ideas__gallery div { 
 
    margin: 10px; 
 
} 
 
.ideas__gallery__h4 { 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    color: #fff; 
 
    font-size: 22px; 
 
    line-height: 1.2em; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.one:hover .ideas__gallery__h4 { 
 
    color: #ff5b5d; 
 
    transition: all 0.2s ease-in; 
 
} 
 
.one:hover, 
 
.two:hover, 
 
.three:hover, 
 
.four:hover, 
 
.five:hover, 
 
.six:hover { 
 
    display: table; 
 
} 
 
.ideas__gallery__h3 { 
 
    color: #333; 
 
    font-weight: bold; 
 
    font-size: 22px; 
 
    text-align: center; 
 
    margin-bottom: 34px; 
 
} 
 
.one { 
 
    width: calc(33.3333333333333333% - 20px); 
 
    height: 310px; 
 
    background: url('http://carwallstar.com/wp-content/uploads/2014/11/ford-car-images2015-ford-mustang--2015-ford-mustang-29-----froggpondcom-w8lqchv6.jpg') 100% 100% no-repeat; 
 
    background-size: cover; 
 
    float: left; 
 
    text-align: center; 
 
} 
 
.two { 
 
    width: calc(33.3333333333333333% - 20px); 
 
    height: 310px; 
 
    background: url('http://www.jdpower.com/sites/default/files/legacy_files/pictures/j/jdpower/0981/d6be82ef8f0dfc684d7aed8755d13dcbx.jpg') 50% 100% no-repeat; 
 
    background-size: cover; 
 
    float: left; 
 
    text-align: center; 
 
} 
 
.three { 
 
    width: calc(33.3333333333333333% - 20px); 
 
    height: 310px; 
 
    background: url('http://cdn.corlate.co/2015/08/04/fordmustangsportscar-l-64469263d3a6c918.jpg') 50% 100% no-repeat; 
 
    background-size: cover; 
 
    float: left; 
 
    text-align: center; 
 
} 
 
.four { 
 
    width: calc(33.3333333333333333% - 20px); 
 
    height: 310px; 
 
    background: url('http://7-themes.com/data_images/out/75/7029170-ford-cars-wallpaper.jpg') 50% 100% no-repeat; 
 
    background-size: cover; 
 
    float: left; 
 
    text-align: center; 
 
} 
 
.five { 
 
    width: calc(66.6666666666666667% - 20px); 
 
    height: 310px; 
 
    background: url('http://img.otodriving.com/files/2015/10/Ford-www.otodriving.com-HD-33.jpg') 50% 100% no-repeat; 
 
    background-size: cover; 
 
    float: left; 
 
    text-align: center; 
 
} 
 
.six { 
 
    width: calc(66.6666666666666667% - 20px); 
 
    height: 310px; 
 
    background: url('http://resources.carsguide.com.au/styles/cg_hero_large/s3/ford-mustang-2015-v8-gt-(2).jpg') 50% 100% no-repeat; 
 
    background-size: cover; 
 
    float: left; 
 
    text-align: center; 
 
} 
 
.seven { 
 
    width: calc(33.3333333333333333% - 20px); 
 
    height: 310px; 
 
    background: url('http://carsformula.com/wp-content/uploads/2014/10/2015-Ford-Mustang-50-Year-Limited-Edition-Specs.jpg') 80% 100% no-repeat; 
 
    background-size: cover; 
 
    float: left; 
 
    text-align: center; 
 
}

<div class="wrapper"> 
 
    <div class="ideas__gallery"> 
 
    <h3 class="ideas__gallery__h3">Headline</h3> 
 
    <a href="#"> 
 
     <div class="one border"> 
 
     <h4 class="ideas__gallery__h4">Headline Three Words</h4> 
 
     </div> 
 
    </a> 
 
    <div class="two border"><a href="#" class="ideas__gallery__a">Headline Three Words</a> 
 
    </div> 
 
    <div class="three border"><a href="#" class="ideas__gallery__a">Headline Four Nice Words</a> 
 
    </div> 
 
    <div class="four border"><a href="#" class="ideas__gallery__a">One</a> 
 
    </div> 
 
    <div class="five border"><a href="#" class="ideas__gallery__a">Headline Three Words</a> 
 
    </div> 
 
    <div class="six border"><a href="#" class="ideas__gallery__a">One</a> 
 
    </div> 
 
    <div class="seven border"><a href="#" class="ideas__gallery__a">One</a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

你的1個像素由四捨五入來。

如果您在Chrome中加載開發者控制檯並檢查寬度，則設置display: table會導致寬度向下舍入爲整數。由於取決於用戶代理處理像素的分數，即使行爲不一致，它仍然有效。

查看以下代碼並通過開發人員控制檯查看維度。 display: table顯然會丟棄小數像素。

.wrapper { 
 
    margin: 0 auto; 
 
    max-width: 940px; 
 
    background: #EBEBEB; 
 
} 
 
.border { 
 
    border-radius: 4px; 
 
} 
 
.ideas__gallery div { 
 
    margin: 10px; 
 
} 
 
.ideas__gallery__h4 { 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    color: #fff; 
 
    font-size: 22px; 
 
    line-height: 1.2em; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.one:hover .ideas__gallery__h4 { 
 
    color: #ff5b5d; 
 
    transition: all 0.2s ease-in; 
 
} 
 
.table { 
 
    display: table; 
 
} 
 
.ideas__gallery__h3 { 
 
    color: #333; 
 
    font-weight: bold; 
 
    font-size: 22px; 
 
    text-align: center; 
 
    margin-bottom: 34px; 
 
} 
 
.one { 
 
    width: calc(33.3333333333333333% - 20px); 
 
    height: 310px; 
 
    background: url('http://carwallstar.com/wp-content/uploads/2014/11/ford-car-images2015-ford-mustang--2015-ford-mustang-29-----froggpondcom-w8lqchv6.jpg') 100% 100% no-repeat; 
 
    background-size: cover; 
 
    float: left; 
 
    text-align: center; 
 
}

<div class="wrapper"> 
 
    <div class="ideas__gallery"> 
 
    <h3 class="ideas__gallery__h3">Discover holiday activity ideas</h3> 
 
    <a href="#"> 
 
     <div class="one border"> 
 
     <h4 class="ideas__gallery__h4">Headline Three Words</h4> 
 
     </div> 
 
     <div class="one border table"> 
 
     <h4 class="ideas__gallery__h4">Headline Three Words</h4> 
 
     </div> 
 
    </a> 
 
    </div> 
 
</div>