Разница в позиционировании стола в Chrome, Firefox и IE

Question

Я не могу понять проблему позиционирования, используя таблицу в firefox и IE. Скриншот покажет полную проблему http://jsfiddle.net/qfDB9/ Даже после обеспечения правильной высоты и ширины проблема сохраняется. Фактическая причина, по которой я создал таблицу, отлично отображается в Chrome, тогда как IE и Firefox имеют проблемы с позиционированием.

CSS:

table tr #number_table { 
    width:50px; 
    height:50px; 
    text-align:center; 
    font-size:50px; 
} 
table tr #photo_table { 
    width:150px; 
    height:100%; 
    text-align:center; 
} 
table tr #description_table { 
    width:400px; 
    padding-bottom:2em; 
    font-size:20px; 
} 
table tr #band_name { 
    text-align:center; 
    height:25px; 
} 

HTML:

<table border="1" cellpadding="0" cellspacing="5" width="600px" style="color:#000;"> 
<tr> 
    <td id="number_table">1</td> 
    <td rowspan="2" id="photo_table"><a href="http://upload.wikimedia.org/wikipedia/commons/d/df/The_Fabs.JPG" target="_blank"><img src="http://upload.wikimedia.org/wikipedia/commons/d/df/The_Fabs.JPG" width="140px" height="140px"/></a></td> 
    <td rowspan="4" id="description_table">something something <br><br><br><br>something something <br><br><br><br>something something <br><br><br><br>something something <br><br><br><br></td> 
</tr> 
<tr> 
    <td rowspan="3"></td> 
</tr> 
<tr> 
    <td id="band_name">Something</td> 
</tr> 
</table> 

Есть ли способ решить эту проблему.

Answer 1

Вы должны вертикального выравнивания содержимого в <tr> теги

table tr { vertical-align:top; }

См DEMO

Я мог бы также добавить, что вы должны рассмотреть возможность использования div's вместо tables

Answer 2

[SOLVED] Проверьте это. Просто добавь valign="top" к <tr> или <td>

ДЕМО ЗДЕСЬ:http://jsfiddle.net/qfDB9/9/

Answer 3

Предложение, Всегда старайтесь слишком использовать семантический код. например, используя thead, tbody, так как он помогает в реализации CSS тоже. Также помогите в оптимизации CSS на всем сайте.

Решение Вы можете добавить CSS «table tbody td{vertical-align:top;}», так что все содержание во всех <td> с следует выровнять вверх. Поэтому, если вам нужно указать заголовок таблицы, который обычно выравнивает нижний, тогда вы можете обрабатывать <thead> <th> «vertical-align: bottom.».

Пожалуйста, обратитесь код здесь:

HTML

<table border="1" cellpadding="0" cellspacing="5" width="600px" style="color:#000;"> 
    <thead> 
    <tr> 
     <th>Heading 1</th> 
     <th>Heading 2</th> 
     <th>Heading 3</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td id="number_table">1</td> 
     <td rowspan="2" id="photo_table"><a href="http://upload.wikimedia.org/wikipedia/commons/d/df/The_Fabs.JPG" target="_blank"><img src="http://upload.wikimedia.org/wikipedia/commons/d/df/The_Fabs.JPG" width="140px" height="140px"/></a></td> 
     <td rowspan="4" id="description_table">something something <br> 
     <br> 
     <br> 
     <br> 
     something something <br> 
     <br> 
     <br> 
     <br> 
     something something <br> 
     <br> 
     <br> 
     <br> 
     something something <br> 
     <br> 
     <br> 
     <br></td> 
    </tr> 
    <tr> 
     <td rowspan="3"></td> 
    </tr> 
    <tr> 
     <td id="band_name">Something</td> 
    </tr> 
    </tbody> 
</table> 

CSS

table thead th{vertical-align:bottom;} 
table tbody td{vertical-align:top;} 


table tr #number_table { 
    width:50px; 
    height:50px; 
    text-align:center; 
    font-size:50px; 

} 
table tr #photo_table { 
    width:150px; 
    height:100%; 
    text-align:center; 
} 
table tr #description_table { 
    width:400px; 
    padding-bottom:2em; 
    font-size:20px; 
} 
table tr #band_name { 
    text-align:center; 
    height:25px; 
} 

Вы можете обратиться к скрипкой тоже: http://jsfiddle.net/aasthatuteja/sU3SS/

Сообщите мне, если поможет!

Наслаждайтесь!