0

私は現在ウェブサイトに取り組んでおり、ページのタイトル/投稿のタイトルには、色と中央にテキストを設定するための div があります。Chrome やその他のブラウザでは問題なく動作しますが、IE ではテキストが垂直方向の中央に配置されません。

IE上のウェブサイト

クロム

上の画像 (IE) でわかるように、テキストは垂直に入力されていませんが、クロムではそうです。

私の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

スタイルの前に星を付けることで、IE だけがレンダリングする特定のパディングを設定できます。

*padding: 1em;

それで遊んでください-それは役立つかもしれません。

于 2012-07-03T02:27:51.250 に答える
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 に答える
1

vertical-align:middle;タイトル div のCSS スタイル属性を試すことができます

于 2012-07-03T01:55:16.347 に答える
0

まず、Mac OSXでは、テキストがChrome19の中央に配置されていないように見えました。

このJSBinを参照してください：http：//jsbin.com/apiqog​​/24/ edit

のパーセンテージの高さを捨てる場合は、とdiv#titleの両方に同じ高さを設定しdiv#title、同じ量の線の高さを指定することもできます。h1h1

私はMacを実行しているので、IEに簡単にアクセスできませんが、特定の要素で高さと行の高さを同じに設定することは、その中のテキストを垂直方向に整列させるための良いアプローチであることがわかりました。ブラウザ。

于 2012-07-03T03:14:15.770 に答える