IEでのレイアウト崩れ

ご質問させて頂きます。

今現在HPページを作成してるのですがIEだけレイアウト崩れを起こします。
（FireFox・cromeでは問題なく表示されます）

ネットで検索し互換表示やIEのデベロッパーモードをEgdeに変更しても直りません。
レイアウトの崩れかたとしてはmarginが効いておらずdivで囲った内容が左つめになってる
状態です。
内容としてはタイトルがついた文字のみになります。

お手数ですがどなたかお分かりになるかたお助けください；；


HTML

<div id="introduction">
<h1>たいとる</h1>
<p>文章</p>
</div><!--END/introduction-->

CSS

#introduction {
width: 600px;
height: 500px;
margin: 0 auto;
writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
}

No.2 ベストアンサー 回答者： fujillin 回答日時： 2016/08/31 09:30

こんにちは

姑息な方法ですが・・・

#introductionの外側に包含要素を設けて、そちらでサイズとmarginを設定する。
#introductionはwidth、heightを100%でmarginはなし。


あるいは、きっぱりIEなんぞは無視する。（苦笑）

この回答へのお礼

IE無視はちょっときついです（笑顔）

どうやら縦書きの -ms-writing-mode: tb-rl;が原因のようですが、
＃intrpductionのwidthを％で指定したところ上手く行きました！！
ありがとうございます！！助かりました！今後もよろしくお願いします^^

PS：IE無視はできません笑

お礼日時：2016/09/01 02:20

No.1 回答者： daaa- 回答日時： 2016/08/30 18:07

ブラウザごとに、if でかき分けるしかないでしょう。

この回答へのお礼

ありがとうございます！試してみます！

お礼日時：2016/09/01 02:21