Explorer 和 Firefox 中的渲染不一致

Question

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

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

感谢您的评论。

<!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>

Answer 1

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

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

如果您对此发表评论，那么您可以正常看到文字。

修改后的代码：

<!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 浏览器中的输出：

Explorer 和 Firefox 中的渲染不一致

Inconsistent rendering in Explorer and Firefox

firefox

internet-explorer

rendering