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

2018-06-29 03:27:09

我试图找出它是什么关于按钮元素，导致CSS 宽度属性被视为按钮的整个宽度，包括填充和边框宽度。 CSS通常具有宽度限定所述内容宽度，填充内部的框的宽度，和浏览器（IE，火狐，铬在Windows 7，至少）通过对的div遵守。

在我的下面的示例中，我设计了一个按钮和一个div ，看起来相似（并且具有悬停效果），但对于div ，我使用width来指定单独的内容区域的宽度。因此，即使两个按钮的总宽度相同，按钮的CSS宽度为190px，而CSS宽度为152px（悬停时为150px）。

（结果是相同的，无论是否显示：我添加到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>

您需要重置默认按每种浏览器以不同方式定义的按钮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>

链接地址: http://www.djcxy.com/p/81363.html

上一篇: CSS width different for button and div elements

下一篇: CSS Make the absolute child width independent from the relative parent width