Internet Explorer中的字段集图例

Question

我在这里拔头发。

我正在设计一个ASP.NET构建站点的前端，其中一部分是带有图例的字段集，但是IE，firefox和chrome之间的区域看起来完全不同。 IE是目前为止最便宜的。 我无法使用设置此版本的方式来加载特定于浏览器的样式表，但是我可以在一个样式表中使用CSS特定于浏览器的技巧。

这是在Firefox中的外观：

这是在chrome中的外观：

这是在IE中的外观：

这是我的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绝不会允许我这样做，尤其是在bg中使用alpha时。

Answer 1

您可以使用以下CSS技巧：

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

高度30px是一个示例，蓝色应替换为标签背景的颜色。