CSS跨浏览器图像对齐问题

Question

我正在Ken大学的网站上工作，我遇到了跨浏览器的问题。

在IE 8中，它显示不正确。 但是在firefox和chrome中它运行良好。

这是我试图修复的文本框的图像..

这是演示页面。 http://safijustonline.com/Forms/Student/StudentRegistration.aspx

请在IE和Firefox中查看..

如何解决这种跨浏览器的图像对齐问题？

登录详情：

username = alinisar@ken.com pass = 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;
}

按钮顶部的图像。

Answer 1

尝试在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">

请记住，顶部的元标记将被赋予首选

Answer 2

添加此内容并尝试

    .ajax__combobox_textboxcontainer{
    vertical-align:top;
}

我在IE8中测试过。它的工作原理

<强> DEMO

Answer 3

您的解决方案很简单：只需将display: block添加到这些元素样式即可。 它解决了IE 10上的问题。

未显示的元素block不使用：padding和margin。 我的建议是，尝试使用内联样式编码的类。

Answer 4

你尝试过的位置：亲戚;或位置：绝对;