Браузеры с разным дизайном для одного и того же div

0

У меня есть несколько разных проблем.

У меня есть div с несколькими другими div и некоторыми элементами управления. Моя самая большая проблема заключается в том, что он не похож на Chrome, как в других браузерах. Как сейчас, это выглядит следующим образом: Изображение 174551

И самая большая проблема связана с Chrome, где текстовое поле справа от текста "width:" переходит на следующую строку. Код этого поля можно увидеть в этом JSFiddle или в следующем виде:

<div id="div_properties" class="redBorder left" style="clear: left; display: 
    <div class="right">
        <a href="#" id="closePropertiesWindow">
        <img src="close.png" title="Close window"></a>
    </div>
    <div class="centered noMargin whiteBackground">
        <h3 class="noMargin">Properties</h3>
    </div>
    <hr class="noMargin noPadding">

    <div id="div_properties_content" style="display: block;">
        <div class="noMargin propertiesControl" prop="text" style="width:100%;">
            text: 
            <input type="text" id="propertytextTextBox" class="right"></input> 
        </div>
        <div class="noMargin propertiesControl" prop="width" style="width:100%;">
            width: 
            <input type="number" id="propertywidthNumber" class="right"></input> 
        </div>
        <div class="noMargin propertiesControl" prop="italic" style="width:100%;">
            italic: 
            <input type="checkbox" id="propertyitalicCheckBox" class="right" checked="checked"> 
        </div>
        <div class="noMargin propertiesControl" prop="bold" style="width:100%;">
            bold: 
            <input type="checkbox" id="propertyboldCheckBox" class="right"> 
        </div>
        <br>
        <input type="button" id="savePropertiesButton" value="Save" class="right">
    </div>
</div>

И CSS выглядит следующим образом:

#div_properties {
    margin-top: 5px;
    background-color: #F0F0F0;
    width: 300px;
    float: left;
    min-height: 75px;
}

.redBorder {
    border: 1px solid red;
}

.noMargin {
     margin: 0 0 0 0;
}

.left {
    float: left;
 }

 .right {
      float: right;
 }

(Это все связанные классы в этой области, другие классы, определенные в элементах, не имеют стилей, а используются в JavaScript.)

Кроме того, еще одна проблема, с которой я столкнулась, - это "рамка" вокруг закрытого изображения в IE. Это не большая проблема, но если кто-то знает, что ее вызывает, это было бы фантастически.

Теги:
styles

1 ответ

2
Лучший ответ

Это плавание, которое вызывает проблему. Вам нужно их очистить.

.propertiesControl {
    clear:both;
}

http://jsfiddle.net/JWDkM/2/

  • 0
    Работает отлично. Можете ли вы объяснить, почему это исправляет это? Я хотел бы знать для дальнейшего использования.
  • 1
    floats не влияет на их контейнер, как это делает непоплаванный элемент, поэтому родительский объект не остается открытым для его плавающих дочерних элементов.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню