CSS邊界在Chrome

切斷在Chrome中我的形象邊界被切斷右側 enter image description here CSS邊界在Chrome

，但在其他瀏覽器，它看起來罰款它只發生在Chrome中。有沒有解決這個問題？這裏的現場真人版http://www.blackrockshooter.nu

2014-01-12 Cool Yuri

我認爲，問題不在於邊界，但寬度。正在修剪邊框以適應內容 – jgabriel

如果您刪除'.box-images {padding：5px;}'，那麼它們都適合。當然，你必須修復'.smallinfo'。 – evan

所以刪除填充修復，但我想填充，所以它看起來不錯 –

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

來源

2014-01-12 03:49:13

請更改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; 
}

來源

2014-01-12 03:51:20 Kamlesh

更改屬性column-gap以0：

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

來源

2014-01-12 03:51:46 DaniP

更新.imagecontent象下面這樣：

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

那麼邊框會出來再

來源

2014-01-12 03:52:18 chen

CSS邊界在Chrome

回答

相關問題