CSS跨瀏覽器圖像對齊問題

我在肯大學網站上工作，並且我正在獲取跨瀏覽器的問題。CSS跨瀏覽器圖像對齊問題

在IE 8中顯示不正確。但在Firefox和鉻它工作正常。

這是我正努力修復該文本框..

這裏是演示頁圖像。 http://safijustonline.com/Forms/Student/StudentRegistration.aspx

請它在IE和Firefox ..

如何解決這個跨瀏覽器的圖像對齊問題？

登錄信息：

用戶名= [email protected] 通= 123

更新：

我還添加reset.css文件在我的主題。

生成的我的代碼HTML：上按鈕的頂部

.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; 
}

圖片：

<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。 enter image description here

來源

2013-02-22 Sizzling Code

如果您創建相關代碼行的小提琴將更容易回答 – Sowmya 2013-02-22 06:19:32

您能告訴我們圖像的確切位置嗎？ – 2013-02-22 06:19:45

嘗試使用此CSS：它將所有內容重置爲默認值。 http://meyerweb.com/eric/tools/css/reset/ – shnisaka 2013-02-22 06:21:16

嘗試添加以下meta標籤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">

記得meta標籤是在頂部將給予第一優先

來源

2013-02-22 06:30:26

添加這一點，並嘗試

.ajax__combobox_textboxcontainer{ 
    vertical-align:top; 
}

我在IE8中測試過。它的工作原理

DEMO

來源

2013-02-22 06:31:54 Sowmya

你的解決方法很簡單：只需添加display: block這些元素的風格。它已解決IE 10上的問題。

未顯示的元素block不使用：padding和margin。和我的建議，嘗試使用內聯風格編碼的類。

來源

2013-02-22 08:11:09 bumerang

你試過位置：相對;或位置：絕對;

來源

2013-03-31 08:33:24 Dillan

CSS跨瀏覽器圖像對齊問題

回答

相關問題