<!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 的按钮添加样式。所以，我根本没有改变边框宽度。然而，在重新加载页面后，按钮现在看起来像这样:
完全看不懂。我查看了 Developer Toolbar，Opera 的 Dev 工具，Firebug，Safari 的 Dev 工具，并分析了每个按钮。为什么 FireFox 和 IE 会导致按钮发生如此巨大的变化，而 Safari、Chrome 和 Opera 的外观和感觉却完全一样？我不明白为什么按钮会改变颜色并失去它的“四舍五入”而变成“方形”。
我什至添加了我到处都看到的 YUI 重置链接，研究这个问题，但没有帮助。
我做错了什么？
我只想让按钮的边框、内边距和边距在所有浏览器中都保持一致，同时保持默认按钮 () 的外观和感觉，但 IE 和 FireFox 让这变得困难此刻。
谢谢。
最佳答案
这只是浏览器呈现按钮方式的不同。你没有做错任何事；这只是一个跨浏览器渲染问题。就其本身而言，您不能使它们以相同的方式呈现其默认按钮图形。
如果您希望您的按钮在所有浏览器中具有完全相同的外观和感觉，我的建议是您使用 CSS 创建它们。它的代码更多，但可以为您提供所需的精确控制。
那里有一些优秀的 CSS 按钮制作工具。这是一个。
http://css-tricks.com/examples/ButtonMaker/
喂!
关于css - 更改边框样式时，按钮在 IE 和 Firefox 中失去默认边框圆 Angular ，但在 Opera、Chrome 和 Safari 中工作正常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9005922/