0

テーブルを使用してコンテンツを表示しています。テーブルには 3 行あります。各行 (2 td) には、複数の行の内容が含まれる場合があります。現在、コンテンツが複数の行に広がっている場合、Mozilla、chrome では完全に正常に動作します (その特定の行の高さだけが増加します) が、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 に答える