IE瀏覽器中的CSS與Chrome的混亂......任何人都可以幫我在Chrome中右鍵排列這些內容嗎？ 它適用於IE

Question

為了使這個問題最容易混淆，我做了一個JS小提琴。

http://jsfiddle.net/hollycotta/27K5V/5/

如果您在IE中查看，結果排在右側。

如果您在Chrome中查看，則方塊不會排列在右側並且看起來很混亂。

有誰知道哪些缺失的部分會使它在Chrome和IE中排隊？

我需要保留div ID“Tier3”，“Tier2”和“Tier1”，因為我會根據表單的其他部分以編程方式隱藏和顯示它們。 還有很多javascript使用輸入ID等。有沒有辦法進行CSS更改只是為了解決這個問題？

非常感謝您提前尋求幫助，這讓我感到難過。

-冬青

因為當我鏈接一個JS小提琴時我也需要提供代碼，我會在這里粘貼CSS但是它在JS Fiddle中都有html標記，這會產生我的問題：

      #leftRadioButtonOptions {
position: relative;
left : 5px;
top  : 65px;
width: 230px;
text-align:right;
      }

      input[type=radio] {
         display:none;
   }

      input[type=radio] + label{
         display:inline-block;
         margin:-2px;
         padding: 2px 4px 2px 4px;
         margin-bottom: 0;
         font-size: 10px;
         line-height: 12px;
         color: transparent;
         text-align: center;
         text-shadow: 0 1px 1px rgba(255,255,255,0.75);
         vertical-align: middle;
         cursor: pointer;
         background-color: #f5f5f5; 
         background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
         background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
         background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
         background-image: -o-linear-gradient(top,#fff,#e6e6e6);
         background-image: linear-gradient(to bottom,#fff,#e6e6e6);
         background-repeat: repeat-x;
         border: 1px solid #ccc;
         border-color: #e6e6e6 #e6e6e6 #bfbfbf;
         border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
         border-bottom-color: #b3b3b3;
         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
         filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
         -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
         -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
         box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
   }

   input[type=radio]:checked + label{
            background-image: none;
         outline: 0;
         -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
         -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
         box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
         background-color:white;
    color:black;

   }

Answer 1

看起來像空白文本節點的事情。

不是一個好方法來解決它，但添加  在每個塊的末尾固定Chrome中的對齊問題。

實際上最好不要使用<br> ，而是將你需要的每一行包裝成div 。

Answer 2

怎么樣？

我將每個項目包裝在div中並將其添加到原始css中

.entry {
    margin: 0 0 10px 0 ;    
}

和HTML

<div id="leftRadioButtonOptions">
    <div id="Tier3">
        <div class="entry">
            Overall Status:
            <input id="overallGreen" type="radio" />
            <label for="overallGreen" style="background-color: #03ce07;"><b>G </b></label>
            <input id="overallYellow" type="radio" />
            <label for="overallYellow" style="background-color: #fff31a;"><b>Y </b></label>
            <input id="overallRed" type="radio" />
            <label for="overallRed" style="background-color: red;"><b>R </b></label>
        </div>

        <div class="entry">
            Schedule:
            <input id="scheduleGreen" type="radio" />
            <label for="scheduleGreen" style="background-color: #03ce07;"><b>G </b></label>
            <input id="scheduleYellow" type="radio" />
            <label for="scheduleYellow" style="background-color: #fff31a;"><b>Y </b></label>
            <input id="scheduleRed" type="radio" />
            <label for="scheduleRed" style="background-color: red;"><b>R </b></label>
        </div>

        <div class="entry">
            Risks/Issues/Concern:
            <input id="risksGreen" type="radio" />
            <label for="risksGreen" style="background-color: #03ce07;"><b>G </b></label>
            <input id="risksYellow" type="radio" />
            <label for="risksYellow" style="background-color: #fff31a;"><b>Y </b></label>
            <input id="risksRed" type="radio" />
            <label for="risksRed" style="background-color: red;"><b>R </b></label>
        </div>

        <div class="entry">
            Customer Satisfaction:
            <input id="satisfactionGreen" type="radio" />
            <label for="satisfactionGreen" style="background-color: #03ce07;"><b>G </b></label>
            <input id="satisfactionYellow" type="radio" />
            <label for="satisfactionYellow" style="background-color: #fff31a;"><b>Y </b></label>
            <input id="satisfactionRed" type="radio" />
            <label for="satisfactionRed" style="background-color: red;"><b>R </b></label>
        </div>
    </div>
    <div id="Tier2">
        <div class="entry">
            Budget:
            <input id="budgetGreen" type="radio" />
            <label for="budgetGreen" style="background-color: #03ce07;"><b>G </b></label>
            <input id="budgetYellow" type="radio" />
            <label for="budgetYellow" style="background-color: #fff31a;"><b>Y </b></label>
            <input id="budgetRed" type="radio" />
            <label for="budgetRed" style="background-color: red;"><b>R </b></label>
        </div>

        <div class="entry">
            Deliverables:
            <input id="deliverablesGreen" type="radio" />
            <label for="deliverablesGreen" style="background-color: #03ce07;"><b>G </b></label>
            <input id="deliverablesYellow" type="radio" />
            <label for="deliverablesYellow" style="background-color: #fff31a;"><b>Y </b></label>
            <input id="deliverablesRed" type="radio" />
            <label for="deliverablesRed" style="background-color: red;"><b>R </b></label>
        </div>
    </div>
    <div id="Tier1">
        <div class="entry">
            Scope/Contract:
            <input id="scopeGreen" type="radio" />
            <label for="scopeGreen" style="background-color: #03ce07;"><b>G </b></label>
            <input id="scopeYellow" type="radio" />
            <label for="scopeYellow" style="background-color: #fff31a;"><b>Y </b></label>
            <input id="scopeRed" type="radio" />
            <label for="scopeRed" style="background-color: red;"><b>R </b></label>
        </div>
    </div>
</div>

http://jsfiddle.net/27K5V/6/