0

この質問の混乱を最小限に抑えるために、JS Fiddle を作成しました。

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

IEで見ると右側に結果が並んでいます。

Chromeで見ると右側に四角が並んでおらず、ごちゃごちゃして見えます。

Chrome と IE でどの部分が欠けているか知っている人はいますか?

div ID 'Tier3'、'Tier2'、および 'Tier1' を保持する必要があります。これは、フォームの他の部分に応じてプログラムで非表示にしたり表示したりするためです。入力 ID などを使用する JavaScript もたくさんあります。これを修正するためだけに CSS を変更する方法はありますか?

助けてくれてありがとう、これは私を困惑させました。

-ホリー

JS Fiddle をリンクするときにもコードを提供する必要があるため、ここに CSS を貼り付けますが、問題を引き起こす html マークアップを含むすべてが JS Fiddle にあります。

      #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

空白のテキスト ノードのように見えます。

それを修正する良い方法ではありませんが、 各ブロックの最後に追加すると、Chrome での位置合わせの問題が修正されました。

実際には<br>s を使用しない方がよいですが、必要なすべての行を で囲みますdiv

于 2013-10-31T01:23:15.720 に答える