すべての tr と td の境界線を持つテーブルがあり
、td の中に入れました
<input type="radio" />
入力表示ブロックを与えます。
私の問題はIE7だけです。
入力から表示ブロックを削除しようとすると、境界線が表示されます。
では、この問題を処理するにはどの CSS を使用すればよいでしょうか?
これはテーブルです:
<table cellspacing="0" cellpadding="0" class="grid rounded small">
<tr class="grid-headers"><th></th><th>Symmetric</th><th>Imparied</th></tr>
<tr class="grid-row">
<td><span>Biceps</span></td>
<td class="radio ">
<input type="radio" id="question-34838" value="21380" name="helpfulness_34838[]" class="styled">
</td>
<td class="radio ">
<input type="radio" id="question-34838_21382" value="21382" name="helpfulness_34838[]" class="styled">
</td>
</tr>
</table>
そしてスタイル:
#content table.grid {
width: 100%;
border: 2px solid #7DB9E8;
float: left;
clear: left;
margin-top: 5px;
overflow: hidden;
}
#content .grid .grid-row {
height: 30px;
background: #eee;
background: -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dddddd));
background: -webkit-linear-gradient(top, #ffffff 0%,#dddddd 100%);
background: -o-linear-gradient(top, #ffffff 0%,#dddddd 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#dddddd 100%);
background: linear-gradient(top, #ffffff 0%,#dddddd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 );
}
#content .grid .grid-row td {
padding: 0px;
margin-top: 0px;
border-bottom: 1px solid #ccc;
}
#content .grid .grid-row:hover {
background: #fff;
}
#content .grid .grid-row:hover td {
background: #f9f9f9;
}
#content .grid .grid-row td:first-child {
padding-left: 5px;
}
#content .grid-headers {
height: 30px;
background: #7DB9E8;
color: #fff;
font-weight: bold;
text-align: center;
}
#content .grid-headers:hover {
background: #7DB9E8;
}
#content .grid td.radio {
height: 30px;
background: transparent;
border-left: 1px solid #ccc;
}
#content .grid td.radio:hover {
background: #fff url('checks_hover.png') 50% 0px no-repeat;
cursor: pointer;
}
#content .grid td.radio.selected {
background: #f9df18 url('checks_clicked.png') 50% 0px no-repeat;
}
#content .grid td.radio.selected:hover {
background: #fceb55 url('checks_hover.png') 50% 0px no-repeat;
}
#content .grid td.checkbox {
height: 30px;
background: transparent;
border-left: 1px solid #ccc;
}
#content .grid td.checkbox:hover {
background: #fff url('checks_hover.png') 50% 0px no-repeat;
cursor: pointer;
}
#content .grid td.checkbox.selected {
background: #f9df18 url('checks_clicked.png') 50% 0px no-repeat;
}
#content .grid td.checkbox.selected:hover {
background: #fceb55 url('checks_hover.png') 50% 0px no-repeat;
}
実際にJSプロトタイプによって生成されたすべてのHTML