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

【问题标题】：CSS width different for button and div elements按钮和 div 元素的 CSS 宽度不同
【发布时间】：2016-02-15 15:00:28
【问题描述】：

我试图弄清楚 button 元素是什么导致 CSS width 属性被视为按钮的整个宽度，包括填充和边框宽度。 CSS 通常有 width 定义内容宽度，填充内框的宽度，并且浏览器（至少在 Windows 7 上的 IE、Firefox、Chrome）遵守 divs.

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

（无论是否添加 display: inline-block，结果都相同，我为 div 添加到 CSS 中以尝试匹配浏览器的 按钮的显示属性。）

结果：

有什么见解吗？

<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>

【问题讨论】：

阅读 box-sizing 属性，它可能对您有所帮助
developer.mozilla.org/en/docs/Web/CSS/box-sizing
浏览器显示表单元素的方式不同。我看到了您在 Firefox 中看到的内容，但在其他浏览器（如 Chrome 和 Safari）中，to 元素看起来相同。

标签： css width

【解决方案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>

【讨论】：

谢谢，我不知道这个功能。完成。