0

我正在使用表格来显示内容。表中有 3 行。在每一行（2 td）中，可以有多行内容。现在，它在 Mozila 中运行得非常好，当内容分布在超过 1 行时（它只会增加该特定行的高度），但在 IE8、IE9 中，它也会增加其他 tr 的高度。这是我的表格代码。

<table id="tbl_polls" style="border:none; width:100%">                                                                     
  <tbody>
      <tr>
         <td colspan="2" class="poll-q">
              POLL QUESTION    
         </td>               
      </tr>                 
       <tr>
            <td style="width:3%;float:left">                                    
                <input type="radio" style="margin: 2px 0 0 2px; display:inline-block" value="108" name="answer">&nbsp;
            </td>
            <td style="width:97%;float:left" >                                
                ANS 1: Carmont wins by retire
            </td>
      </tr>             
      <tr>
          <td style="width:3%;float:left" >                                 
            <input type="radio" style="margin: 2px 0 0 2px; display:inline-block" value="109" name="answer">&nbsp;
          </td>
          <td style="width:97%;float:left" >                                
            ANS 2: Carmont wins by decision                                
          </td>
     </tr>              
     <tr>
          <td style="width:3%;float:left" >                                 
            <input type="radio" style="margin: 2px 0 0 2px; display:inline-block" value="110" name="answer">&nbsp;
          </td>
          <td style="width:97%;float:left" >                                
            ANS 3: someone wins but i'm just not sure if i can make a specific decision as to what i think will happen exactly,this is longest answer and its spreads                   
          </td>
     </tr>              
    </tbody>

编辑：我已经上传了。 http://designs.digitaldreamstech.com/boldtiger/polls/

4

2 回答 2

1

请用这个替换你的代码，

<table id="tbl_polls" style="border:none; width:100%" cellpadding="5" cellspacing="5">
<tr>
    <td valign="center" colspan="2">
        POLL QUESTION    
    </td>
</tr>
<tr>
    <td>                                    
        <input type="radio" style="margin: 2px 0 0 2px; display:inline-block" value="108" name="answer">&nbsp;
    </td>
    <td>                                
        ANS 1: Carmont wins by retire
    </td>
  </tr>
  <tr>
      <td>                                 
        <input type="radio" style="margin: 2px 0 0 2px; display:inline-block" value="109" name="answer">&nbsp;
      </td>
      <td >                                
        ANS 2: Carmont wins by decision                                
      </td>
 </tr>
  <tr>
      <td>                                 
        <input type="radio" style="margin: 2px 0 0 2px; display:inline-block" value="110" name="answer">&nbsp;
      </td>
      <td>                                
        ANS 3: someone wins but i'm just not sure if i can make a specific decision as to what i think will happen exactly,this is longest answer and its spreads                   
      </td>
 </tr>
</table>

现在请检查所有浏览器中的页面。它工作得很好。

于 2012-11-22T08:01:11.017 回答
0

首先，您对表格做了非常奇怪的事情，浮动表格单元格通常不是您最好的主意，并且可能会破坏至少 IE 和其他浏览器中的内容。而且表格通常不是设计表格的最佳方式。

我建议您的表格采用以下结构：

HTML：

<form>
    <fieldset>
        <div class="row">
            <input type="radio" value="109" name="answer" />
            <label for="input_1">ANS 2: Caromt wins by decision</label>
        </div>
    </fieldset>
</form>

CSS：

div.row {
    clear: both;
}
label {
    float: left;
}
input {
    float: left;
    width: 350px;
}

您可以在此处找到更多正确构建表单的方法：http: //www.gethifi.com/blog/html-forms-the-right-ways

于 2012-11-22T08:04:27.963 回答