0

为了让这个问题不那么令人困惑，我做了一个 JS Fiddle。

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

如果在 IE 中查看，结果在右侧排列。

如果在 Chrome 中查看，右侧的方块没有排成一行，看起来很乱。

有谁知道缺失的部分会使其在 Chrome 和 IE 中对齐吗？

我需要保留 div ID 'Tier3'、'Tier2' 和 'Tier1'，因为我会根据表单的其他部分以编程方式隐藏和显示它们。还有很多使用输入 ID 等的 javascript。有没有办法只更改 CSS 来解决这个问题？

非常感谢您的帮助，这让我很困惑。

-冬青

由于我在链接 JS Fiddle 时也需要提供代码，因此我将在此处粘贴 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;

   }
4

2 回答 2

1

这是怎么回事？

我将每个项目包装在一个 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/

于 2013-10-31T01:55:35.817 回答
1

看起来像关于空白文本节点的事情。

不是修复它的好方法，但&nbsp;在每个块的末尾添加修复了 Chrome 中的对齐问题。

实际上最好不要使用<br>s，而是将您需要的每一行都包装到div.

于 2013-10-31T01:23:15.720 回答