资源管理器和火狐浏览器中的渲染不一致

问题描述 投票:0回答:1

以下代码在Firefox和Internet Explorer中的渲染效果不同。有什么好的原因吗?

这里的尝试是在一些大小相同的彩色框中加入风格化的链接。目前,文本链接在Firefox中可以正常工作,但资源管理器决定它们应该在文本框外。之所以要在文本框的周围设置,是因为它们会在悬停时改变颜色,使超链接更加明显。

谢谢你的评论。

<!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>
internet-explorer firefox rendering
1个回答
1
投票

我试着用IE 11、Firefox和Google Chrome浏览器来测试你的代码。

我注意到 转化:翻译 财产 #menubutton p 类导致这个问题。

如果你对它进行注释,那么你就可以正确地看到文字。

修改后的代码。

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

在IE11浏览器中输出。

enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.