TwitterBootstrap, IEでハマる

TwitterBootstrap　を利用していてIE8, 9でハマりました。IE6,7はおいてけぼり。

モダンブラウザと呼ばれる、GoogleChrome/FireFox/Safari　では全く問題なく表示されていたTwitterBootstrapのグリッドシステムですが、IEではなぜかレイアウトが崩れてしまいます。

Paddingか？？？違う。

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->

NetBeansで新規HTMLファイルを作成したときについてくる、ファイルの先頭にある上記コメントでした。
DOCTYPE宣言の前に文字があると後方互換モードになるというヤツらしいです。

今後のお約束として”DOCTYPE宣言の前には何も書かないとも”ということにします。
XML宣言は例外ですね

readonly と disabled

HTML の readonly と disabled の違い

<input type="text" readonly="readonly" name="hoge1" value="りーどおんりー"/>
<input type="text" disabled="disabled" name="hoge2" value="でぃすぇーぶるど"/>
↓
見た目が違います。



そして、

hoge1は、POSTされる
hoge2は、POSTされない

ということでした。

IEでのinnerHTML

FirefoxではOKだったのですが、IEではダメだった件。

<select>のinnerHTMLに該当する部分である<option>を書き換える処理がだめでした。

たくさんの解決方法がWebにはありました。Webって素敵！

BUG: インターネット エクスプ ローラーを失敗した innerHTML プロパティのオブジェクトの選択を設定するのには　http://support.microsoft.com/kb/276228/ja

<select>をラッピングした<div>のinnerHTMLを書き換えるということみたいです。

（変更前）
select1のinnerHTMLを書き換え→ＮＧ
<select id="select1">
  <option>…</option>
  <option>…</option>
</select>

（変更後）
select_div1のinnerHTMLを書き換え→ＯＫ
<div id="select_div1">
<select id="select1">
  <option>…</option>
  <option>…</option>
</select>
</div>