CSS форма ie7 ошибка с полем слева и с плавающей точкой

Question

Этот код CSS имеет проблемы для ie7.В ie6 - абсолютный беспорядок.
Проблема в том, что текстовое поле ввода получает метку ниже. Единственное, что нужно сделать, - это смещение элемента div влево, но возникают проблемы с определением размера.* ОБНОВЛЕНИЕ

Я обнаружил, что проблема из-за ширины ввода 100% .. Я ищу, как это исправить.

Answer 1

IE6 и IE7 не играют хорошо, когда на дисплее установлено «inline-block»;

Попробуйте добавить следующее в правило CSS вашей метки:

fieldset label{
    display:-moz-inline-stack;
    display:inline-block;
    zoom:1;
    *display:inline;
}

Я бывероятно, есть условный лист для браузеров IE (как правило, как я справляюсь с этой проблемой).Вот сайт, который объясняет проблему более подробно, чем я когда-либо мог: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Answer 2

Одно из решений, которое может сработать (оно работает для меня), - применить отрицательное поле при вводе (текстовое поле) ... или фиксированную ширину для ie7 или отказаться от поддержки ie7.

У меня была такая же проблема, и я ненавидел иметь дополнительные div для границы и т. Д.!

Так вот мое решение, которое, кажется, работает!

Вы должны использовать таблицу стилей только ie7, чтобы избежать взломов.

input.text{
    background-color: #fbfbfb;
    border : solid #eee 1px;
    width: 100%;
    -box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 32px;

    *line-height:32px;
    *margin-left:-3px;
    *margin-right:-4px;
    display: inline;   
    padding: 0px 0 0 5px;

}

Answer 3

Может быть, вам придется написать vertical-align:top на вашем ярлыке & input . Напишите так:

label, input{
 vertical-align:top;
}