Question

我正在尝试弄清楚按钮元素是什么导致CSS width 属性被视为按钮的整个宽度，包括填充和边界宽度。 CSS通常有宽度定义内容宽度，填充内框的宽度，以及浏览器（IE，Firefox，Chrome至少在Windows 7上）遵守 div < /强>秒。

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

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

结果：

任何见解？

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

段：

＆＃13;

/*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;
}

＆＃13;

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

＆＃13;

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

1 个答案:

段：