更改边框样式时，按钮在 IE 和 Firefox 中失去默认边框舍入，但在 Opera、Chrome 和 Safari 中工作正常答案

【问题标题】：button loses default border rounding in IE and Firefox when changing border-style, but works fine in Opera, Chrome, and Safari更改边框样式时，按钮在 IE 和 Firefox 中失去默认边框舍入，但在 Opera、Chrome 和 Safari 中工作正常
【发布时间】：2012-02-18 19:50:10
【问题描述】：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<style type="text/css">
input {
  border-width: 2px; /* causes button to change dramatically in IE and FireFox */
}

</style>

</head>
<body>
<input type="button" value="Print"/>
</body>
</html>

如果我让每个浏览器都呈现没有任何样式的按钮，它们看起来都类似于：

例如，在 IE 8 中，默认边框宽度为 2px。我所做的是为将边框宽度设置为 2px 的按钮添加样式。所以，我根本没有改变边框宽度。但是，在重新加载页面后，按钮现在看起来像这样：

我完全不明白。我查看了开发者工具栏、Opera 的开发工具、Firebug、Safari 的开发工具，并分析了每个按钮。为什么 FireFox 和 IE 会导致按钮发生如此巨大的变化，而 Safari、Chrome 和 Opera 的外观和感觉却完全一样？我不明白为什么按钮会改变颜色并失去它的“四舍五入”而变成“方形”。

我什至添加了我随处可见的 YUI 重置链接，研究了这个问题，但没有帮助。

我做错了什么？

我只想让按钮的边框、内边距和边距在所有浏览器中都一样，这样它们看起来都一样，同时保持它的外观和感觉就像默认按钮 ()，但是 IE 和 FireFox 让这变得困难目前。

谢谢。

【问题讨论】：

你可以加border-radius:2px;
也许读 this 和 this
还可以查看-moz-appearance, -webkit-appearance 以了解使用平台默认样式。

标签： css internet-explorer button cross-browser border

【解决方案1】：

将边框设置为无对我有用（在 IE9/IE10 上）：

border: none;

将其设置为空（即边框：;）也可以。

【讨论】：

空白值无效，可能会搞砸其他事情。

【解决方案2】：

这只是浏览器呈现按钮的方式不同。你没有做错任何事；这只是一个跨浏览器渲染问题。就其本身而言，您不能使它们以相同的方式呈现其默认按钮图形。

如果您希望所有浏览器的按钮具有完全相同的外观和感觉，我的建议是使用 CSS 创建它们。它是更多的代码，但它可以为您提供所需的精确控制。

那里有一些优秀的 CSS 按钮制造商。这是一个。

http://css-tricks.com/examples/ButtonMaker/

HTH！

【讨论】：