Legset в Internet Explorer

Я вытаскиваю свои волосы здесь.Legset в 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 позволит мне сделать это, особенно с альфа я использую в мой bg.

источник

2013-07-28 Artsen

Что здесь такое? Они, конечно, не совсем разные. При первом взгляде они выглядят одинаково. При более близком рассмотрении слайдер-подобные детали выглядят по-разному, но это вызвано тем, что не раскрывается в опубликованном коде. Название вопроса предполагает, что речь идет о * legend *, тогда как текст, кажется, говорит, что все * fieldsets * отображаются по-разному. –

Я имею в виду легенду на полевом наборе, они визуализируются по-разному между каждым (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

Legset в Internet Explorer

ответ

Смежные вопросы