以下代码在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>
我试着用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浏览器中输出。