Question

我正在使用表格来显示内容。表格中有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/

Answer 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>

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

Answer 2

首先，你使用表格进行非常奇怪的事情，浮动表格单元通常不是你最好的想法，并且可能会破坏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

在IE中增加一行高度时增加其他行的高度

2 个答案: