Chrome边框切断了CSS边框

Question

在Chrome中，我的图像边框在右侧被切除

但在其他浏览器中它看起来很好，它只发生在Chrome中。有没有解决这个问题？这是网站的实时版本http://www.blackrockshooter.nu

Answer 1

<强> CSS：

.box-images img {
    box-sizing: border-box; /* add this */
    -moz-box-sizing: border-box; /* Firefox */
    -webkit-box-sizing: border-box; /* Older Webkit browsers */

    border: 3px solid #1f5bbb;
    float: left;
    padding: 5px;
}

Information on box-sizing

Answer 2

请更改CSS

.box-images img {
    border: 3px solid #1f5bbb;
    float: left;
    /*padding: 5px;*/
}
.smallinfo {
    color: #FFF;
    background-color: #1f5bbb;
    float: left;
    width: 100%;
    border-right-width: 3px;
    border-left-width: 3px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #1f5bbb;
    border-left-color: #1f5bbb;
    /*padding-right: 5px;*/
    padding-bottom: 5px;
    /*padding-left: 5px;*/
    font-weight: bold;
    font-size: 0.75em;
    text-align: center; 
}

Answer 3

将属性column-gap更改为0：

.imagecontent {
  -webkit-column-gap:0;
  column-gap:0;
}

Answer 4

更新.imagecontent，如下所示：

.imagecontent { -moz-column-count: 4; -moz-column-gap: 6px; width: 960px; }

然后边界将再次出现