Question

我在谷歌浏览器中遇到CSS <buttons>的问题，它显示<buttons>之间的空格，但在Opera和IE中它可以，为什么？

以下是完整的CSS代码：

button {
    border: 1px solid #bdbdbd;
    text-shadow: 0 1px 1px white;
    font: bold 11px Sans-Serif;
    padding: 6px 8px;
    white-space: nowrap;
    vertical-align: middle;
    color: #666;
    background: -webkit-linear-gradient(top, white, #E0E0E0);
    background:    -moz-linear-gradient(top, white, #E0E0E0);
    background:     -ms-linear-gradient(top, white, #E0E0E0);
    background:      -o-linear-gradient(top, white, #E0E0E0);
    cursor: pointer;
    text-decoration: none;
    margin-right: -1px;
}

这是HTML代码：

<div><button type="button">Send</button><button type="button">Reset</button></div>

感谢您的帮助。

Answer 1

每组按钮都包含在div中，其中margin-left为三（3）个像素。

编辑 Chrome还会应用一（1）像素的默认边距。您需要将边距设置为零（0）以使按钮摆脱此间距。

Answer 2

似乎也是左边距。这可以在Chrome中进行更正（不确定它在其他浏览器中会做什么）...我编辑了保证金属性。

button {
border: 1px solid #bdbdbd;
text-shadow: 0 1px 1px white;
font: bold 11px Sans-Serif;
padding: 6px 8px;
white-space: nowrap;
vertical-align: middle;
color: #666;
background: -webkit-linear-gradient(top, white, #E0E0E0);
background:    -moz-linear-gradient(top, white, #E0E0E0);
background:     -ms-linear-gradient(top, white, #E0E0E0);
background:      -o-linear-gradient(top, white, #E0E0E0);
cursor: pointer;
text-decoration: none;
margin: 0 -1px 0 0;
}

Google Chrome会在<buttons> </buttons>之间显示空格

2 个答案: