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

debugcn 发表于 Dev

格林格拉索·霍尔姆（Green Grasso Holm）

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

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

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

结果：

有什么见解吗？

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-16

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

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

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

片段：

CSS提交按钮和输入文本的宽度不同

为什么按钮，输入vs div的宽度结果不同？

在CSS中设置选择和输入元素的宽度

CSS和jQuery具有不同的宽度

在CSS中设置选择和输入元素的宽度相等

CSS根据内部元素获取溢出div容器的最大宽度

使div具有不同宽度和点击速度的动画

div中span元素的悬停和mouseout的不同CSS过渡延迟？

CSS：div中元素的动态宽度

两个div的CSS Div静态和自动宽度

响应式div的宽度和高度与CSS

在CSS中获取div，按钮等的宽度

检查我的代码时元素的不同宽度和高度

宽度和最大宽度（css）

在CSS中设置选择和输入元素的宽度

CSS和jQuery具有不同的宽度

CSS类将应用于div元素和按钮元素

CSS：div中元素的动态宽度

CSS div和按钮的高度相等

CSS Div的两个div的静态和自动宽度

DIV和TEXTAREA元素对“宽度” CSS属性的解释不同吗？

基于宽度的不同CSS

为什么宽度和高度CSS不会影响此按钮元素？

jQuery toggleClass和CSS动画div宽度

标签和输入宽度与CSS不同

按钮宽度不同

div旁边的CSS div和第二个元素的宽度

输入和按钮，相同的css，不同的高度

使用范围滑块和 JavaScript 更改 DiV 元素的宽度