0

ケン大学のウェブサイトで作業していますが、クロスブラウザの問題が発生しています。

IE 8では、正しく表示されません。しかし、FirefoxとChromeでは問題なく動作します。

それは私が修正しようとしているテキストボックスのある画像です。

こちらがデモページです。 http://safijustonline.com/Forms/Student/StudentRegistration.aspx

IEとFirefoxの両方で確認してください。

このクロスブラウザ画像の配置の問題を解決するにはどうすればよいですか？

ログインの詳細：

ユーザー名=alinisar@ken.comパス=123

アップデート：

テーマにreset.cssファイルも追加しました。

私のコードの生成されたHTML：

<div id="CPH_Content_TabContainerStudentRegistration_TabPanelMain_Cmb_Shift" class="WindowsStyle" style="display:inline-block;">
<table id="CPH_Content_TabContainerStudentRegistration_TabPanelMain_Cmb_Shift_Cmb_Shift_Table" class="ajax__combobox_inputcontainer" cellspacing="0" cellpadding="0" style="border-width:0px;border-style:None;border-collapse:collapse;display:inline-block;position:relative;top:5px;">
<tbody>
<tr>
<td class="ajax__combobox_textboxcontainer">
<td class="ajax__combobox_buttoncontainer">
<button id="CPH_Content_TabContainerStudentRegistration_TabPanelMain_Cmb_Shift_Cmb_Shift_Button" type="button" style="height: 25px; width: 25px; margin: 0px; padding: 0px; visibility: visible;"></button>
</td>
</tr>
</tbody>
</table>
<ul id="CPH_Content_TabContainerStudentRegistration_TabPanelMain_Cmb_Shift_Cmb_Shift_OptionList" class="ajax__combobox_itemlist" style="display: none; visibility: hidden; z-index: 10000; overflow: hidden; width: 215px; position: absolute; height: 30px;">
<li>Morning</li>
<li>Evening</li>
</ul>
<input id="CPH_Content_TabContainerStudentRegistration_TabPanelMain_Cmb_Shift_Cmb_Shift_HiddenField" type="hidden" value="0" name="ctl00$CPH_Content$TabContainerStudentRegistration$TabPanelMain$Cmb_Shift$Cmb_Shift_HiddenField">
</div>

私のボタンと画像のCSS：

.WindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button {
    background-image: url("Images/windows-arrow.gif");
    background-position: left top;
    border: 0 none;
    height: 22px;
    margin: -10px 0 0;
    padding: 0;
    width: 22px;
}

ボタン上部の画像。 ここに画像の説明を入力してください

4

4 に答える 4

0

以下のメタタグを Head セクションに追加してみてください

<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="X-UA-Compatible" content="chrome=1">

一番上にあるメタタグが最初に優先されることに注意してください

于 2013-02-22T06:30:26.317 に答える
0

これを追加して試してください

    .ajax__combobox_textboxcontainer{
    vertical-align:top;
}

IE8でテストしました。できます

デモ

于 2013-02-22T06:31:54.863 に答える
0

position:relative; を試しましたか。または position:absolute;

于 2013-03-31T08:33:24.137 に答える
0

解決策は簡単ですdisplay: block。これらの要素のスタイルに追加するだけです。IE 10での問題を解決しました。

表示されない要素はblock使用しない:paddingとmargin. そして私のアドバイスは、インラインスタイルのコーディングの代わりにクラスを使用することです.

于 2013-02-22T08:11:09.453 に答える