У меня есть несколько разных проблем.
У меня есть div с несколькими другими div и некоторыми элементами управления. Моя самая большая проблема заключается в том, что он не похож на Chrome, как в других браузерах. Как сейчас, это выглядит следующим образом:
И самая большая проблема связана с 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. Это не большая проблема, но если кто-то знает, что ее вызывает, это было бы фантастически.
Это плавание, которое вызывает проблему. Вам нужно их очистить.
.propertiesControl {
clear:both;
}
floats
не влияет на их контейнер, как это делает непоплаванный элемент, поэтому родительский объект не остается открытым для его плавающих дочерних элементов.