Firefox在边框图像中增加了额外的空间位置

我有一个<img>在<button>。该按钮有一个边框。图像缩放至100％高度，按钮宽度由计算图像宽度决定。到目前为止这么好，只要按钮上没有边框就可以工作。如果我添加边框，Firefox会缩小图像的大小，但不会调整为新的图像宽度。它只会增加额外的空间。 Chrome和Safari正在按预期做到这一点 - 或者至少如我所料。Firefox在边框图像中增加了额外的空间位置

我该如何让Firefox表现得一样？

图

你可以看到我试图摆脱额外的绿化面积。

HTML

<div class="wrapper"> 
    <button> 
     <img src="//placehold.it/160x90"> 
    </button> 
</div>

CSS

.wrapper { 
    height: 100px; 
} 

button { 
    height: 100%; 
    padding: 0; 
    background: green; 
    border: 0; 
    border: 3px solid tomato; 
    cursor: pointer; 
} 

button::-moz-focus-inner { 
    padding: 0; 
    border: 0; 
} 

button img { 
    height: 100%; 
    width: auto; 
}

小提琴

https://jsfiddle.net/4tjmmq58/

来源

2016-03-02 lampshade

为什么你不使用''而不是用按钮包装图像？ – Aaron

@Aaron我认为我获得了语义，因为按钮应该是可点击的GUI元素，而不是实际的输入元素或更具体的“*图形提交按钮*”。 – lampshade

也就是说火狐如何解释div标签添加宽度的div，但你可以改变的CSS是这样的：

.wrapper { 
    height: 100px; 
    width: 170px; 
} 

button { 
    height: 100%; 
    padding: 0; 
    background: green; 
    border: 0; 
    border: 3px solid tomato; 
    cursor: pointer; 
} 

button::-moz-focus-inner { 
    padding: 0; 
    border: 0; 
} 

button img { 
    height: 100%; 
    width: auto; 
}

，这应该可以解决周围的过大的div按钮。但我会建议使用不同的浏览器和<tags>做你的事情。

参考： http://www.w3schools.com/cssref/pr_dim_width.asp

来源

2016-03-02 10:47:17 Panchi

这不会解决问题，因为包装实际上是多个元素的包装，而不仅仅是一个按钮 - 这将在DOM中矫枉过正。 :)此外，按钮的宽度取决于嵌入式图像。我不太明白，你想说什么“*但是我会推荐使用不同的浏览器，并在做你自己的事情时使用。”*。 – lampshade

你只需要添加box-sizing: content-box;的按钮，您的问题将得到固定的，但另一个将会出现。现在您的边框将不会在元素width/height中计算，因此您可能需要手动减去边框。

来源

2016-03-02 12:39:34 xpy

Firefox在边框图像中增加了额外的空间位置

回答

相关问题