0

すべての 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

4

0 に答える 0