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/