Internet Explorer中的字段設置圖例

我在這裏拉我的頭髮。Internet Explorer中的字段設置圖例

我正在構建ASP.NET構建網站的前端，其中一個部分是帶有圖例的字段集，但是這個區域在IE，firefox和chrome之間看起來完全不同。 IE是迄今爲止最差的。我沒有能力使用這個版本設置的方式加載瀏覽器特定的樣式表，但是我可以在一個樣式表中使用CSS瀏覽器特定的黑客。

這是它的外觀在Firefox： Firefox screen capture

這是它的外觀鍍鉻： Chrome screen capture

這是它的外觀在IE： IE screen capture

這是我的HTML和css爲字段集和圖例：

#TabContainerAlerts_TabPanelBloodPressureAlerts_UpdatePanelBloodPressureAlerts > fieldset, 
 
#TabContainerAlerts_TabPanelGlucoseAlerts_UpdatePanelGlucoseAlerts > fieldset, 
 
#TabContainerAlerts_TabPanelWeightAlerts_UpdatePanelWeightAlerts > fieldset, 
 
#TabContainerAlerts_TabPanelTemperatureAlerts_UpdatePanelTemperatureAlerts > fieldset, 
 
#TabContainerAlerts_TabPanelOxygenAlerts_UpdatePanelOxygenAlerts > fieldset { 
 
    border: 1px solid #7a8dab; 
 
    border-radius: 10px; 
 
    float: left; 
 
    width: 81%; 
 
    display: inline-block; 
 
    margin-left: -5px; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
} 
 
#TabContainerAlerts_TabPanelBloodPressureAlerts_UpdatePanelBloodPressureAlerts > fieldset > legend, 
 
#TabContainerAlerts_TabPanelGlucoseAlerts_UpdatePanelGlucoseAlerts > fieldset > legend, 
 
#TabContainerAlerts_TabPanelWeightAlerts_UpdatePanelWeightAlerts > fieldset > legend, 
 
#TabContainerAlerts_TabPanelTemperatureAlerts_UpdatePanelTemperatureAlerts > fieldset > legend, 
 
#TabContainerAlerts_TabPanelOxygenAlerts_UpdatePanelOxygenAlerts > fieldset > legend { 
 
    text-indent: 8px; 
 
    display: inline-block; 
 
    position: relative; 
 
    top: -10px\9; 
 
    /* IE 8 and below */ 
 
}

<fieldset id="FieldSetAlertsBloodPressureSystolic"> 
 
    <legend> 
 
    Systolic 
 

 
    <input id="TabContainerAlerts_TabPanelBloodPressureAlerts_CheckBoxBloodPressureSystolicAlertEnablement" type="checkbox" onclick="javascript:setTimeout('__doPostBack(\'TabContainerAlerts$TabPanelBloodPressureAlerts$CheckBoxBloodPressureSystolicAlertEnablement\',\'\')', 0)" 
 
    checked="checked" name="TabContainerAlerts$TabPanelBloodPressureAlerts$CheckBoxBloodPressureSystolicAlertEnablement"></input> 
 
    </legend> 
 
    <div id="TabContainerAlerts_TabPanelBloodPressureAlerts_PanelBloodPressureSystolicAlerts"> 
 
    <div id="DivBloodPressureSystolicAlertSection"> 
 
     <div id="DivBloodPressureSystolicAlertNormalWrapper">…</div> 
 
     <div id="DivBloodPressureSystolicAlertWarningWrapper">…</div> 
 
     <div id="DivBloodPressureSystolicAlertCriticalWrapper">…</div> 
 
     <div id="DivMultiSliderExtenderBloodPressureSystolicAlert">…</div> 
 
    </div> 
 
    </div> 
 
</fieldset>

我試圖讓一切看起來像它在Firefox沒有，但我開始認爲有將是沒有辦法IE就會讓我做到這一點，特別是我使用在阿爾法我的寶貝。

來源

2013-07-28 Artsen

這裏有什麼不同？他們肯定不是*完全*不同。首先看，他們看起來很相似。仔細一看，類似滑塊的部分看起來不一樣，但這是由未在發佈代碼中公開的內容引起的。問題的標題表明這是關於* legend *，而文字似乎表示整個* fieldsets *呈現不同。 –

我的意思是fieldset上的圖例，它們在每個圖層之間呈現不同的效果（firefox和chrome在邊框頂部，而在IE中它在邊框下）。 firefox和chrome的區別是左邊緣相關的 – Artsen

所以它不是真的*完全*不同。我認爲你應該嘗試將問題簡化爲更簡單的情況。 'fieldset'元素中的其他內容似乎與問題無關，並且使用更簡單的樣式（例如，白底黑色而不是對比度不足的顏色）可以更容易地看到問題。這個問題可能與'fieldset'的不同實現及其與CSS設置的交互有關。 –

you can use the following css trick: 

fieldset> legend{ 
    height:30px; 
    position:absolute; 
    margin-top:-10px; 
    background:blue; 
}

高度30px是一個例子，藍色應該被標籤背景的顏色替換。

來源

2015-03-11 13:30:18

Internet Explorer中的字段設置圖例

回答

相關問題