HTML / CSS: странный отступ элемента ввода ie7

Question

http://jsfiddle.net/vol7ron/yHdr6/

INPUT берет поле слева от предка DIV.
Установка поля родительского DIV / SPAN / INPUT не имеет никакого эффекта (если я не пропустил один).

---

HTML

---

<form>
   <div id="contact_info">
      <div><span>Name:  </span></div>
      <div><span>Email: </span></div>
      <div><span>Phone: </span></div>
      <div>
         <label for="email">Owner Email: </label>
         <span class="ib">
            <input type="text" name="email" id="email"/><br />
            <span>(correct if needed)</span>
         </span>
      </div>
   </div>
</form>

---

CSS

---

span.ib { 
    border         : 1px solid red;  /* for debugging */
    display        : inline-block; 
    vertical-align : top; 
} 

#contact_info {
    border         : 1px solid #ccc; 
    margin         : 1em 2em; 
    padding        : 1em;
}

/* Debugging Attempts *
.ib,input {
    clear:left;
    display:inline-block;
    margin:0em 0em !important;
    left:0;
    padding:0em 0em !important;
    position:relative;
    text-align:left;
    text-indent:0 !important;
}/**/

Answer 1

Это на самом деле не наследует запас. display: inline-block; в родительском div приводит к тому, что входной элемент внутри него равен offset left величине поля из div#contact_info. Это отличается от margin-left и связано с hasLayout.

У вас есть несколько вариантов исправления:

1. Удалите inline-block из диапазона и найдите другой способ (например, поместите описание под меткой).
2. добавить position: relative; left: -2em; к входу, используя таблицу стилей IE7. Это имеет больше смысла, чем использование зума, так как в будущем люди могут не понять эффект. Однако очевидно, что в браузере исправлена ​​ошибка, приводящая к смещению позиции ввода, и что вы ее компенсируете.
3. используйте zoom, пожалуйста, не надо. Добавление zoom:1 к родителю div#contact_info даже не решает проблему, за исключением hasLayout, являющегося проблемой. Кроме того, Safari и IE поддерживают масштабирование как атрибут css, поэтому в будущем это может вызвать другие проблемы.

Answer 2

Я бы всегда включал сброс CSS, чтобы избежать подобных проблем.Эрик Мейер широко известен как хороший для использования, хотя и не единственный.

http://meyerweb.com/eric/tools/css/reset/

Answer 3

Итак, попробовав еще две вещи, я обнаружил, что добавление zoom:1 или display:inline-block; к родительскому DIV входа (не SPAN) удалит этот странный отступ. Таким образом, это еще одна hasLayout проблема.

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