0

いくつかの異なる問題があります。

他のいくつかの div といくつかのコントロールを含む div があります。私の最大の問題は、他のブラウザと同じように Chrome で表示されないことです。現状では以下のようになっています。 さまざまなブラウザーのプロパティ ボックス

そして、最大の問題は、「幅:」テキストの右側にあるテキスト ボックスが次の行に移動する Chrome にあります。ボックスのコードは、この 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 の閉じる画像の周りの「ボックスの境界線」です。これは大きな問題ではありませんが、何が原因であるかを誰かが知っていれば、それは素晴らしいことです.

4

1 に答える 1

2

問題を引き起こしているのはフローティングです。それらをクリアする必要があります。

.propertiesControl {
    clear:both;
}

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

于 2013-09-20T10:22:59.010 に答える