ホームページ  >  記事  >  ウェブフロントエンド  >  ie7 および ie8 のテーブルの td 列は固定幅であり、Curve solution_html/css_WEB-ITnose のスタイル設定に従って表示されません。

ie7 および ie8 のテーブルの td 列は固定幅であり、Curve solution_html/css_WEB-ITnose のスタイル設定に従って表示されません。

WBOY
WBOYオリジナル
2016-06-24 12:33:541381ブラウズ

 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset='utf-8'> 5 <style> 6 .title {background-color:#ccc;width: 150px} 7 </style> 8 </head> 9 <body>10 <table style='width:600px'>11 <tr>12 <td class='title'>哈哈</td>13 <td>aa</td>14 <td class='title'>大都市</td>15 <td>bb</td>16 </tr>17 <tr>18 <td class='title'>adad</td>19 <td colspan='3'>alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉</td>20 </tr>21 </table>22 </body>23 </html>

View Code

この場合、ie7やie8では1行目の3列が大幅に拡大され、スタイル幅(幅:150px)通りに表示できなくなります

解決策:

1. 各列の幅をハードコードします

2. パーセンテージを使用して width:150px を width:20% に変更します

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。