我有以下代码，基本上显示 <button> , 和按钮里面的两个 <div> s，一个在按钮的左上角对齐，另一个在右下角对齐:
<html>
<head>
<style>
<!--
.button {
width: 300px;
height: 200px;
background-color: yellow;
position: relative;
padding: 0px;
}
.child_top_left {
position: absolute;
top: 5px;
left: 5px;
background-color: blue;
}
.child_bottom_right {
position: absolute;
bottom: 5px;
right: 5px;
background-color: red;
}
-->
</style>
</head>
<body>
<button class="button">
<div class="child_top_left">top-left</div>
<div class="child_bottom_right">bottom-right</div>
</button>
</body>
</html>
在 Internet Explorer 或 Safari 中一切正常，但在 Firefox 中显示异常。看起来 Firefox 认为按钮的“顶部”实际上位于按钮的中间。
有人遇到过这种行为吗？也许有一些解决方法？
谢谢。
最佳答案
不确定是否已在 DocType 上回答了这个问题，但我设法在 Firefox 中找到了一个简单的解决方法；我没有要测试的 IE 实例，但基本上，您只需将按钮内容包装在一个 div 中:
<html>
<head>
<style>
<!--
.button {
width: 300px;
height: 200px;
background-color: yellow;
position: relative;
padding: 0px;
}
.child_top_left {
position: absolute;
top: 5px;
left: 5px;
background-color: blue;
}
.child_bottom_right {
position: absolute;
bottom: 5px;
right: 5px;
background-color: red;
}
.button_container {
width: 300px;
height: 200px;
}
-->
</style>
</head>
<body>
<button class="button">
<div class="button_container">
<div class="child_top_left">top-left</div>
<div class="child_bottom_right">bottom-right</div>
</div>
</button>
</body>
</html>
关于html <button> 标签在 Firefox 中呈现奇怪，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2192776/