CSS 按钮和 div 元素的宽度不同

Question

我想弄清楚 button 元素是什么导致 CSS width 属性被视为按钮的整个宽度，包括填充和边框宽度。 CSS一般有width定义内容宽度，padding里面框的宽度，浏览器（IE，Firefox，Chrome on Windows 7, 至少) 遵守 divs.

在我下面的示例中，我将按钮和 div 样式设置为看起来相似（并具有悬停效果) 但是，对于 div，我使用 width 单独指定内容区域的宽度。因此，即使两个按钮整体占用相同的宽度，按钮的CSS宽度为190px，而CSS宽度为152px（悬停时为150px） .

（无论有没有 display: inline-block 都是一样的，我为 [=59 添加到 CSS =] 尝试匹配浏览器的 display 属性 button.)

结果：

有什么见解吗？

<html>
    <style>
        .xbutton {
            width: 190px;
            text-align: left;
            background: -webkit-linear-gradient(#eaf2f5, #e0eaee); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(#eaf2f5, #e0eaee); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(#eaf2f5, #e0eaee); /* For Firefox 3.6 to 15 */
            background: linear-gradient(#eaf2f5, #e0eaee); /* Standard syntax */
            border: 1px solid #88949a;
            border-radius: 5px;
            padding: 8px 18px 8px 18px;
            font-family: Arial;
            font-size: 14px;
            color: #000000;
        }

        .xbutton:hover {
            background: -webkit-linear-gradient(#d2e0e8, #b8c3c9); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(#d2e0e8, #b8c3c9); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(#d2e0e8, #b8c3c9); /* For Firefox 3.6 to 15 */
            background: linear-gradient(#d2e0e8, #b8c3c9); /* Standard syntax */
            border: 2px solid #7b888e;
            padding: 8px 16px 8px 20px;
        }

        .xbutton-icon {
            margin: 0 7px 0 0;
            vertical-align: middle;
        }

        div.xbutton { display: inline-block; width: 152px; }
        div.xbutton:hover { width: 150px; }
     </style>


    <title>Button test</title>
    <div><button class="xbutton"><img class="xbutton-icon" src="GetFileAttachment.png" width="25" height="18">Email attachment</button></div>
    <div class="xbutton"><img class="xbutton-icon" src="GetFileAttachment.png" width="25" height="18">Email attachment</div>
</html>

Answer 1

您需要重置按钮 css 样式，该样式默认以不同的方式为每个浏览器定义。

/*fix for Firefox */
button::-moz-focus-inner{
  border: 0;
  padding: 0;
}

/*reset button CSS */
button{
  margin: 0;
  padding: 0;
  border: none;
  font: inherit;
  box-sizing: border-box;
}

片段：

/*fix for Firefox */

button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/*reset button CSS */

button {
  margin: 0;
  padding: 0;
  border: none;
  font: inherit;
  box-sizing: border-box;
}
.xbutton {
  width: 190px;
  text-align: left;
  background: -webkit-linear-gradient(#eaf2f5, #e0eaee);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#eaf2f5, #e0eaee);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#eaf2f5, #e0eaee);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#eaf2f5, #e0eaee);
  /* Standard syntax */
  border: 1px solid #88949a;
  border-radius: 5px;
  padding: 8px 18px 8px 18px;
  font-family: Arial;
  font-size: 14px;
  color: #000000;
}
.xbutton:hover {
  background: -webkit-linear-gradient(#d2e0e8, #b8c3c9);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#d2e0e8, #b8c3c9);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#d2e0e8, #b8c3c9);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#d2e0e8, #b8c3c9);
  /* Standard syntax */
  border: 2px solid #7b888e;
  padding: 8px 16px 8px 20px;
}
.xbutton-icon {
  margin: 0 7px 0 0;
  vertical-align: middle;
}
div.xbutton {
  display: inline-block;
  width: 152px;
}
div.xbutton:hover {
  width: 150px;
}

<title>Button test</title>
<div>
  <button class="xbutton">
    <img class="xbutton-icon" src="http://lorempixel.com/25/18" width="25" height="18">Email attachment</button>
</div>
<div class="xbutton">
  <img class="xbutton-icon" src="http://lorempixel.com/25/18" width="25" height="18">Email attachment</div>

CSS 按钮和 div 元素的宽度不同

CSS width different for button and div elements

css

width

片段：