0

我目前在一个网站上工作，对于页面标题/帖子标题，我有一个 div 来设置颜色和一些文本在中心。它在 Chrome 和其他浏览器上运行良好，但我的文本不在 IE 上垂直居中。

IE上的网站

铬合金

正如您在顶部图像 (IE) 中看到的那样，文本不是垂直输入的，而是在 chrome 中的位置。

我的 CSS 代码

h1 {
    font: 100% Coolvetica, Tahoma;
    font-size: 2.2em;
    text-align: left;
    position: absolute;
    padding-top: auto;
    margin-top: auto;
    margin-bottom: auto;
    left: 4%;
    width: 91.2%;
    height: 0%;
    color: #FFFFFF;
    z-index: 4;
}
#title {
    font: 100%;
    font-size: 1em;
    text-align: left;
    position: absolute;
    left: 0%;
    background: #161616;
    width: 100%;
    min-height: 3.7em;
    height: 3.5%;
    padding-top: 0%;
    margin-bottom: 5%;
    margin-top: 0%;
    color: #FFFFFF;
    -moz-box-shadow: 0px 13px 59px #000000;
    -webkit-box-shadow: 0px 13px 59px #000000;
    box-shadow: 0px 13px 59px #000000;
    z-index: 5;
}

我的 HTML 代码

<div id="title">
<h1>
Hello Welcome to Our Online Shop!!!
</h1>
</div>

希望这是足够的信息

谢谢马特

4

4 回答 4

2

我删除了 H1 标签的 position:absolute，它在 IE 中运行良好。

<html>
<head>
<style>

h1{ 
font: 100% Coolvetica, Tahoma; 
font-size:2.2em; 
text-align:left; 
/*position:absolute;*/ 
padding-top: auto; 
margin-top: auto;  
margin-bottom: auto;  
left: 4%; 
width: 91.2%; 
height: 0%; 
color: #FFFFFF; 
z-index:4; 
} 

#title{ 
font: 100%; 
font-size:1em; 
text-align:left; 
position:absolute; 
left: 0%; 
background:#161616; 
width: 100%; 
min-height:3.7em; 
height:3.5%;
padding-top:0%; 
margin-bottom:5%; 
margin-top:0%; 
color: #FFFFFF; 
-moz-box-shadow: 0px 13px 59px #000000; 
-webkit-box-shadow: 0px 13px 59px #000000; 
box-shadow: 0px 13px 59px #000000; 
z-index:5; 
} 
</style>
</head>
<body>
<div id="title"> 
<h1> 
Hello Welcome to Our Online Shop!!! 
</h1> 
</div> 
</body>
</html>
于 2012-07-03T02:07:51.773 回答
2

您可以通过在样式前放置星号来设置仅由 IE 呈现的特定填充。

*padding: 1em;

玩这个——它可能会有所帮助。

于 2012-07-03T02:27:51.250 回答
1

您可以尝试vertical-align:middle;标题 div 的css 样式属性

于 2012-07-03T01:55:16.347 回答
0

首先，在 Mac OSX 上，文本似乎没有在 Chrome 19 中居中。

看到这个 JSBin： http: //jsbin.com/apiqog ​​/24/edit

如果您愿意放弃 上的百分比高度div#title，您可以为 和 设置相同的高度div#title，h1并给出h1相同数量的行高。

我正在运行 Mac，因此无法轻松访问 IE，但我发现在给定元素上将高度和行高设置为相同是垂直对齐文本的好方法，交叉-浏览器。

于 2012-07-03T03:14:15.770 回答