読者です 読者をやめる 読者になる 読者になる

IEでTextFieldの上下ボーダーが消える

IEでExt.JSのTextFieldやTextAreaなどのコンポーネントを表示すると上下のボーダーが消えてしまうことがあるようです。なんかおかしいとは思っていましたが、見た目だけの問題なので放置していました。Ext.JSのサイトのサンプルをIEで閲覧すると画像のように表示されます。私の環境ではIEのバージョン問わずこうなります。

フォーラムに修正用のスタイルシートがありました。
Field borders - Ext JS Forums

/**---------------------------------------------------------------
*** IE8 override fixes                                                     
***---------------------------------------------------------------*/
.x-form-text, .ext-ie .x-form-text, .ext-ie .x-form-file {
    height:22px;
    line-height:18px;
    margin: 0px 0px;
    vertical-align:middle;
}

.ext-ie6 .x-form-text, .ext-ie7 .x-form-text {
    margin:-1px 0; /* ie bogus margin bug */
    height:22px; /* ie quirks */
    line-height:18px;
}

.ext-ie6 textarea.x-form-field, .ext-ie7 textarea.x-form-field {
    margin:-1px 0; /* ie bogus margin bug */
}