IE8でtableのレイアウトが崩れる

質問

Wordpress3のTwenty Tenテーマを使用して、投稿ページを作成しています。
複数列、行のテーブルを表示させていため、カスタマイズしているのですが、
どうしてもIE8のみレイアウトが崩れます。
IE7,9は正しく表示されています。
よろしくお願いします。

■不具合点
・テーブル内の文字を上部にしたいが、下部に表示されてしまう。

■css
table#testtable {
border: 1px solid #e7e7e7;
text-align: left;
background: #f2f7fc;
margin: 0px; padding: 0px;
background: #FFFFFF;
line-height: 20px;
font-size: 12px;
height: 100px;
width:700px;
word-break:break-all;
}

th#testphoto {
text-align: left;
margin: 0px; padding: 0px;
line-height: 30px;
font-weight: bold;
font-size: 12px;
height: 30px;
width:110px;
word-break:break-all;
}
・
・
・
・
td#testphoto {
text-align: left;
margin: 0px; padding: 0px;
line-height: 30px;
font-size: 12px;
height: 90px;
width:110px;
word-break:break-all;
}
・
・
・
・

回答No.1

ORUKA1951 · ベストアンサー

まず、HTMLと、それと平行してCSSを直してみましょう。Validatorでチェックしたらわかるように重大な間違いがたくさんあります。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )］より

th#testphoto{}
td#testphoto{}
なんてありえません。#は一意セレクタで文書中に一箇所しか存在しないはずです。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
id = name [CS]
　この属性は、要素に名前を割り当てる。この名前は文書中で一意でなければならない。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#adef-id )］より
5.9 一意セレクタ（ID selectors） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#id-selectors )

継承するプロパティは親になるセレクタの宣言ブロックに書きましょう。font-size,line-height;text-align

同じ宣言をあちこち書かない。セレクタをグループ化しましょう。

word-break:プロパティはIE独自のもので、多くのブラウザは無視します。使うべきではありません。

HTMLは
<table summary="test" id="form">
　<tbody>
　　<tr>
　　　<th abbr="">
　　　・・・【中略】・・・
　　</tr>
　　<tr>
　　　<td>
　　　・・・【中略】・・・
　　</tr>
　</tbody>
</table>
　以上何も書く必要はないはずです。
table.form{
　　width:700px;margin: 0 auto;
　　border: 1px solid #e7e7e7;
　　font-size: 12px;
　　text-align: left;
　　background-color: #FFFFFF;
　　border-collapse:collapse;
}
#form{
　　line-height: 30px;
　　font-size: 12px;
}
#form tbody tr th,#form tbody tr td{width:110px;vertical-align:top;}
#form tbody tr th{height:30px;}
#form tbody tr td{height:90px;}

なお、必ずDOCTYPE宣言を記述して、標準モードで描画するように指定しましょう。
→DOCTYPE スイッチ - Google 検索 ( https://www.google.co.jp/search?q=word-break%3A&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a#hl=ja&safe=off&client=firefox-a&hs=4E&rls=org.mozilla:ja%3Aofficial&sclient=psy-ab&q=DOCTYPE+%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&oq=DOCTYPE&gs_l=serp.1.0.35i39j0l9.1119629.1122338.1.1124962.7.7.0.0.0.0.451.1350.0j5j1j0j1.7.0...0.0...1c.FeV8i6FmkPg&psj=1&bav=on.2,or.r_gc.r_pw.r_qf.&fp=76212ca705c57eca&biw=1024&bih=619 )

当然ですが文章チェックもしておくこと
→The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )
→Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
→W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )

お礼

ご返信が遅くなり申し訳ございません。

ご回答ありがとうございました。

参考にさせていただきます。

補足

ご返信が遅くなり申し訳ございません。

ご回答ありがとうございました。

参考にさせていただきます。