Explorer 和 Firefox 中的渲染不一致答案

【问题标题】：Inconsistent rendering in Explorer and FirefoxExplorer 和 Firefox 中的渲染不一致
【发布时间】：2020-06-03 11:35:25
【问题描述】：

以下代码在 Firefox 和 Internet Explorer 中的呈现方式不同。有什么好的理由吗？

这里的尝试是让一些大小相同的彩色框内带有样式链接。目前，文本链接在 Firefox 中正常工作，但 Explorer 决定它们应该在文本框之外。围绕框的原因是它们在悬停时会改变颜色，使超链接更加可见。

感谢 cmets。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
<style>
.menu {
    width:100%;
    height:100%;
    margin-top:20pt
    }
.menubuttons {
    left:0%;
    height:100%;
    padding-top:20%;
    display:inline;
    position:static;
    top:20pt;
    width:100%;
    margin:0 0 0 20pt;
    }
#menubutton {
    border-radius:16px;
    background:lightblue;
    color: #000066;
    position:relative;
    height:15%;
    display:inline;
    width:60pt;
    padding:10pt 5pt 10pt 5pt;
    margin:3pt 0 3pt 3pt;
    }
#menubutton p {
    margin:0;
    top:50%;
    left:50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display:inline;
    position:static;
    }
</style>
</head>
<body>
<div class="menu">
  <div class="menubuttons">
    <a id="menubutton" href=""><p>Link one</p></a>
    <a id="menubutton" href=""><p>Link two</p></a>
    <a id="menubutton" href=""><p>Link three</p></a>
    <a id="menubutton" href=""><p>Link four</p></a>
    <a id="menubutton" href=""><p>Link five</p></a>
  </div>
</div>
</body></html>

【问题讨论】：

有什么好的理由吗？我想这取决于你所说的“好”。欢迎享受多浏览器支持带来的乐趣，尤其是在 IE 方面。完全不同的开发组和代码库，各自以自己的方式解释 CSS 的详细渲染规则。顺便说一句，id 通常应该在给定页面上是唯一的。类用于定义元素集合的行为。您应该将menubutton 定义为一个类，而不是id。
@lurker 感谢您的精彩评论，以及有关id 和class 之间区别的信息。我们会假设做出这些区别是业余程序员与专业人士的区别？

标签： internet-explorer firefox rendering

【解决方案1】：

我尝试使用 IE 11、Firefox 和 Google Chrome 浏览器测试您的代码。

我注意到 #menubutton p 类中的 transform: translate 属性导致了这个问题。

如果你对它发表评论，那么你可以正确地看到文字。

修改代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
<style>
.menu {
    width:100%;
    height:100%;
    margin-top:20pt
    }
.menubuttons {
    left:0%;
    height:100%;
    padding-top:20%;
    display:inline;
    position:static;
    top:20pt;
    width:100%;
    margin:0 0 0 20pt;
    }
#menubutton {
    border-radius:16px;
    background:lightblue;
    color: #000066;
    position:relative;
    height:15%;
    display:inline;
    width:60pt;
    padding:10pt 5pt 10pt 5pt;
    margin:3pt 0 3pt 3pt;
    }
#menubutton p {
    margin:0;
    top:50%;
    left:50%;
    /*-ms-transform: translate(-50%, -50%);*/
    /*transform: translate(-50%, -50%);*/
    display:inline;
    position:static;
    }
</style>
</head>
<body>
<div class="menu">
  <div class="menubuttons">
    <a id="menubutton" href=""><p>Link one</p></a>
    <a id="menubutton" href=""><p>Link two</p></a>
    <a id="menubutton" href=""><p>Link three</p></a>
    <a id="menubutton" href=""><p>Link four</p></a>
    <a id="menubutton" href=""><p>Link five</p></a>
  </div>
</div>
</body></html>

在 IE 11 浏览器中的输出：

【讨论】：

好像是这样。谢谢。
如果您认为上述建议可以帮助您解决问题，请接受它作为此问题的答案。它可以在未来帮助其他社区成员解决类似的问题。感谢你的理解。参考：*.com/help/someone-answers