Различия CSS между IE и Firefox: отображение

Question

Я разрабатываю веб-приложение, которое должно работать как с IE7, так и с Firefox 3.6. Я выкладываю формы с помощью CSS. Формы довольно стандартны. Я хочу, чтобы каждый div (группа данных) в своей строке с метками и параметрами, выстроенными вместе внутри div (в виде строки). Вот CSS, который работает в Firefox:

.data-group 
{ 
    /*display: inline-block;*/ 
    vertical-align: top; 
    padding-top: 5px; 
    padding-bottom: 5px; 
} 

.editor-label, .option1, .option2 
{ 
    display: inline-block; 
    /*float: left;*/ 
} 

.editor-label 
{ 
    width: 250px; 
    vertical-align: top; 
} 

К сожалению, это не работает в IE7. Чтобы добиться такого же эффекта, я должен раскомментировать две прокомментированные строки и прокомментировать встроенный блок на .editor-label, .option1, .option2 selection. К сожалению, это разрывает Firefox ... и это действительно не похоже на то, что нужно делать в любом случае (путь Firefox имеет больше смысла). (Я могу получить этот способ работы в Firefox, если я добавлю «чистый» div, где у меня есть «clear: both» в классе этого класса ... но это похоже на взлома.)

Я пропустил что-то очевидное Вот? Предложения, которые помогут сделать эту работу в обоих браузерах, будут отличными.

Редактировать: Предоставить запрошенный (тривиализованный) HTML.

<div class="data-group"> 
     <div class="editor-label"> 
      <%: Html.CheckBoxFor(model => model.cb1)%> 
      <%: Html.LabelFor(model => model.label1) %> 
     </div> 
     <div class="option1"> 
      <%: Html.TextBoxFor(model => model.tb2)%> 
      <div class="label"><%: Html.LabelFor(model => model.label2) %></div> 
     </div> 
     <div class="validation"> 
      <div><%: Html.ValidationMessageFor(model => model.tb2) %></div> 
     </div> 
    </div> 

    <!-- Repeat many diff. data-groups. --> 
    <div class="data-group"> 
     <div class="editor-label"> 
      <%: Html.CheckBoxFor(model => model.cb1)%> 
      <%: Html.LabelFor(model => model.label1) %> 
     </div> 
     <div class="option1"> 
      <%: Html.TextBoxFor(model => model.tb2)%> 
      <div class="label"><%: Html.LabelFor(model => model.label2) %></div> 
     </div> 
     <div class="validation"> 
      <div><%: Html.ValidationMessageFor(model => model.tb2) %></div> 
     </div> 
    </div> 

Answer 1

inline-block оленья кожа правильно работать в IE, http://work.arounds.org/using-inline-block-ie7-and-ie6/

Вы должны повторно объявить display:inline; на элементы уровня блока, которые приведены inline-block в IE. Это означает, что вы должны обновить правило для div, предоставленного встроенным блоком в отдельном правиле.

<!--[if lt IE 8]> 
<style> 
.editor-label { display:inline; zoom:1; } 
</style> 
<![endif]--> 

Это, скорее всего, решит вашу проблему. Если нет, отправьте демо.

Answer 2

Я использую следующий код, который работает во всех браузерах.

HTML-

<div class="field clearfix"> 
    <label for="firstName" id="firstNameLabel">First Name</label> 
    <input name="firstName" type="text" id="firstName" /> 
</div> 

CSS-

.field { 
    margin: 0 0 10px; 
} 
.field label { 
    font-size: 13px; 
    padding: 8px 0; 
    margin: 0 18px 0 0; 
    display: block; 
    float: left; 
    width: 90px; 
} 
.field input, 
.field textarea { 
    width: 220px; 
    font-size: 11px; 
    line-height: 11px; 
    padding: 6px 10px; 
    color: #666; 
    background: #fff; 
    border: 1px solid #c4c6c7; 
    display: block; 
    float: left; 
} 

И все слишком известный clearfix взломать (предотвращает Вас от необходимости добавлять очистки элементов. Просто установите на родительском DIV который содержит плавающие элементы и работает как шарм.

.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    font-size:0; 
    clear: both; 
    visibility:hidden; 
} 
    .clearfix{display: inline-block;} 
    * html .clearfix {height: 1%;} 
    .clearfix {display:block;} 

Вы можете поиграть с шириной, чтобы достичь своего эффекта, а также вы можете установить ширину и для элемента «поле», если вы не хотите, чтобы оно заполнило все свободное пространство.

Удачи.

Answer 3

На данный момент в вашем вопросе нет образца (x) html, поэтому я могу предложить вам только методы - вместо конкретных решений - для решения вашей проблемы, но методы можно легко адаптировать.

У вас есть два очевидных способа ориентации на разные браузеры (хотя он использует условные комментарии IE, поэтому он в основном нацелен на IE и не IE, что может быть не так полезно, как вам нужно) либо использовать условный комментарий к стили импорта специально для Internet Explorer:

<head> 
    <link rel="stylesheet" type="text/css" href="path/to/general/stylesheet.css" /> 

    <!--[if ie]> 
     <link rel="stylesheet" type="text/css href="path/to/ie/stylesheet.css" /> 
    <![endif]--> 
</head> 

недостатком этого подхода является то, что у вас есть два отдельных таблиц стилей для сохранения.

Или вы можете использовать условные комментарии, чтобы изменить специфику ваших селекторов:

<body> 
    <!--[if ie]> 
     <div id="ieOnly"> 
    <![endif]--> 

    <div id="somethingToStyle"> 
     ...content... 
    </div> 

    <!--[if ie]> 
     </div> 
    <![endif]--> 
</body> 

Этот подход позволяет целевой IE иначе, чем для соответствующих браузеров, без использования хаков в вашем CSS:

body > div#somethingToStyle { /* for non-IE */ } 

body > div#ieOnly > div#somethingToStyle { /* IE only */} 

Недостатком этого метода является то, что у вас есть все стили в одной таблице стилей, что может сделать его довольно громоздким для поддержания долгосрочной перспективы.

Кроме того, стоит упомянуть, что использование таблицы стилей сброса CSS и действительного типа doctype, вероятно, уменьшит влияние различий браузера (хотя не все, очевидно).