Firefox中的img旁邊會出現額外的空格

我正在使用max-width：100％;和最大高度：100％;爲我的img標籤。在img周圍有一個容器，出於某種原因，右側出現了圖像旁邊的額外空白。Firefox中的img旁邊會出現額外的空格

enter image description here

容器的寬度是不固定的，所以它應該是相同的，如同圖像+ 15像素填充在每邊。

CSS

*, *:before, *:after { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

ul { 
    list-style:none; 
    margin:0; 
    padding:0; 
} 

li { 
    height:100px; 
    display: inline-block; 
    background: lightblue; 
    padding: 15px; 
} 

img { 
    max-width:100%; 
    max-height:100%; 
}

HTML

<ul> 
    <li><img src="http://lorempixel.com/1450/600/"></li> 
</ul>

Codepen：http://codepen.io/anon/pen/mJJqzo

來源

2015-05-01 user1452062

嘗試使用高度：汽車及寬度：100％（IMG） – anujsoft

@notulysses仍然給出了FF – timo

的微胖是否有比'li'的寬度小的任何圖像？如果沒有，只需在'img'上用'width'替代'max-width'。 – timo

你想同填充不改變寬度。評論下面的CSS：

/*-moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;*/

See DEMO表示FF和鉻相同的輸出。

來源

2015-05-01 13:34:19 Manwal

我需要border-box屬性。我想在所有方面減小15px的尺寸 – user1452062

@ user1452062然後用30px降低高度。 http://codepen.io/anon/pen/JddpWd – timo

老實說，我想找到一個解決方案來解決這個問題在Firefox中沒有刪除我的任何樣式。 – user1452062

請嘗試以下的CSS：

li { 
    background: lightblue none repeat scroll 0 0; 
    display: inline-block; 
    height: 100px; 
    padding: 15px; 
    width: 204px; 
} 
img { 
    height: auto; 
    width: 100%; 
}

來源

2015-05-01 13:30:15

不幸的是，這不是解決方案。請不要修改寬度和高度。 – user1452062

ok現在請嘗試下面的代碼： li { background：lightblue none repeat scroll 0 0; display：inline-block; height：100px; padding：15px; 寬度：20％; }如果你不會固定li寬度，那麼它將全屏顯示。 –

-1

爲li添加寬度。

li{ width:200px; }

來源

2015-05-01 13:34:42 K2R

我不想固定寬度，我想要高度和寬度的響應式圖像。 – user1452062

你可以使用％代替像素。寬度：17％ – K2R

一個可能的解決辦法是做這樣的事情：

li { 
padding: 0px; 
} 

img { 
padding: 0px; 
}

既然你說的圖像並不需要有一個修改大小，只需去除填充產生無法去除的一種方式白色的空間。

來源

2015-05-01 14:41:52 Fishy

使用CSS重置，它會修復所有可能遇到的問題。我建議Eric Meyer的。

/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126 
    License: none (public domain) 
*/ 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
}

來源

2015-05-01 14:43:49 kingkapd

Firefox中的img旁邊會出現額外的空格

回答

相關問題