私のページは safari、chrome、ff では見栄えがよく、IE8 では適切に劣化しますが、クライアントには IE7 も必要です。
動作していない小さなことは、私の H3 です。奇妙なことに、私の H2 は正常に動作します。スタイルを失うことは問題ではありません。これは、より一般的な問題のようです。H3 はまったく表示されません。私はこれをかなり調査し、不足しているスタイル (zoom:1 を含む) に対して推奨されている多くのことを試しましたが、この問題を修正することはできませんでした. 私の最善の推測は、ネストされたdivと関係があるということです...
また、さまざまなDoctypeを試しましたが、役に立ちませんでした...以下を含みます:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>
ここに私のフィドル(より完全なコードを含む)と以下の部分があります:http://jsfiddle.net/cathi/2Kkh2/18/(もちろん、ここではうまくいくようです-マシンでjsfiddleを起動できませんここに IE7. うーん...)
h2 {
color:#007cc0;
font-size:1.4em;
line-height:1.9em;
font-family:'Tahoma',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:10px;
padding-top:0;
padding-left: 35px;
padding-right: 8px;
padding-bottom:0;
font-weight:normal;
}
h3 {
color:#ea752e;
font-size:1.4em;
line-height:1.9em;
font-family:'Tahoma',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:0px;
padding-top:0;
padding-left: 35px;
padding-right: 8px;
padding-bottom:0;
font-weight:normal;
}
そして、html (一部をコピーしますが、すべての div をコピーする必要はありません)
<div class="content-intro">
<h2>Here is my H2 that shows up fine in IE7</h2>
<p>A paragraph of intro copy here</p>
</div>
<div class="content-checklists">