Кривое отображение таблицы в IE 11
Страницы: 1
Кривое отображение таблицы в IE 11
Верстаю шаблончик и когда дело начало подходить к концу начал проверку на кроссбраузерность. Все вроде бы хорошо, да вот в IE 11 криво встает таблица, причем, хочу заметить, таких таблиц на странице будет несколько, но кривая только первая. По нижнему бордюру видно что некоторые столбцы съезжают вниз + правый бордюр на 1px вправо уходит у всех таблиц.
Рисунок


Может есть те, кто знает в чем моя ошибка?

html:
Код
 <div class="server">
                        <div class="headservers">Игровые сервера Counter-Strike 1.6</div>
                        <table class="t">
                            <tr>
                                <th style="width:20px;text-align:center;">#</th>
                                <th style="width:280px;">НАЗВАНИЕ СЕРВЕРА</th>
                                <th style="width:160px;text-align:center;">IP-АДРЕС СЕРВЕРА</th>
                                <th style="width:60px;text-align:center;">ИГРОКИ</th>
                                <th style="width:40px;">&nbsp;</th>
                                <th style="width:140px;">&nbsp;&nbsp;КАРТА</th>
                                <th class="v" style="width:60px;text-align:center;">ГОЛОСА</th></tr>
                            </tr>
                            <tr class="color-1">
                                <td class="o">1</td>
                                <td class="servername"><a alt="cs" title="cs" href="#"><img src="img/icons/cs.png" style="width:16px;height:16px;" /></a>&nbsp;&nbsp;<a href="#">[DM] Server Counter-Strike: Source v34 by DaBags</a></td>
                                <td class="serverip"><img src="img/flags/RU.png" style="width:16px;height:16px;" />&nbsp;255.255.255.255:27015</td>
                                <td style="width:60px;text-align:center;">64/64</td>
                                <td style="width:40px;text-align:center;"><img src="img/maps/de_dust.jpg"></td>
                                <td style="width:140px;">&nbsp;&nbsp;<a alt="de_dust" title="de_dust" href="#">de_dust</a></td>
                                <td class="v"><a href="#" class="rur"></a></td>
                            </tr>
                            <tr class="color-2">
                                <td class="o">2</td>
                                <td class="servername"><a alt="cs" title="cs" href="#"><img src="img/icons/cs.png" style="width:16px;height:16px;" /></a>&nbsp;&nbsp;<a href="#">Public Server Counter-Strike 1.6 by DaBags #212</a></td>
                                <td class="serverip"><img src="img/flags/RU.png" style="width:16px;height:16px;" />&nbsp;255.255.255.255:27016</td>
                                <td style="width:60px;text-align:center;">12/32</td>
                                <td style="width:40px;text-align:center;"><img src="img/maps/de_dust2.jpg"></td>
                                <td style="width:140px;">&nbsp;&nbsp;<a alt="de_dust2" title="de_dust2" href="#">de_dust2</a></td>
                                <td class="v"><span class="votes_count" id="votes_count4">9</span><span class="vote_buttons" id="vote_buttons4"><a href="#" class="vote" id="4"></a></span></td>
                            </tr>
                            <tr class="color-3">
                                <td class="o">3</td>
                                <td class="servername"><a alt="cs" title="cs" href="#"><img src="img/icons/cs.png" style="width:16px;height:16px;" /></a>&nbsp;&nbsp;<a href="#" id="link">GunGame Server Counter-Strike: GO</a></td>
                                <td class="serverip"><img src="img/flags/RU.png" style="width:16px;height:16px;" />&nbsp;255.255.255.255:27017</td>
                                <td style="width:60px;text-align:center;">17/32</td>
                                <td style="width:40px;text-align:center;"><img src="img/maps/default.jpg"></td>
                                <td style="width:140px;">&nbsp;&nbsp;<a alt="de_dust2" title="de_dust2" href="#">gg_lego_arena_cs16</a></td>
                                <td class="v"><span class="votes_count" id="votes_count4">8</span><span class="vote_buttons" id="vote_buttons4"><a href="#" class="vote" id="4"></a></span></td>
                            </tr>
                            <tr>
                                <td class="o">4</td>
                                <td class="servername"><a alt="cs" title="cs" href="#"><img src="img/icons/cs.png" style="width:16px;height:16px;" /></a>&nbsp;&nbsp;<a href="#" id="link">Zombie Server Counter-Strike 1.6</a></td>
                                <td class="serverip"><img src="img/flags/RU.png" style="width:16px;height:16px;" />&nbsp;255.255.255.255:27018</td>
                                <td style="width:60px;text-align:center;">31/32</td>
                                <td style="width:40px;text-align:center;"><img src="img/maps/cs_assault.jpg"></td>
                                <td style="width:140px;">&nbsp;&nbsp;<a alt="de_dust2" title="de_dust2" href="#">zm_assault</a></td>
                                <td class="v"><span class="votes_count" id="votes_count4">3</span><span class="vote_buttons" id="vote_buttons4"><a href="#" class="vote" id="4"></a></span></td>
                            </tr>
                            <tr>
                                <td class="o">5</td>
                                <td class="servername"><a alt="cs" title="cs" href="#"><img src="img/icons/cs.png" style="width:16px;height:16px;" /></a>&nbsp;&nbsp;<a href="#" id="link">Zombie Server Counter-Strike 1.6</a></td>
                                <td class="serverip"><img src="img/flags/RU.png" style="width:16px;height:16px;" />&nbsp;255.255.255.255:27018</td>
                                <td style="width:60px;text-align:center;">31/32</td>
                                <td style="width:40px;text-align:center;"><img src="img/maps/cs_assault.jpg"></td>
                                <td style="width:140px;">&nbsp;&nbsp;<a alt="de_dust2" title="de_dust2" href="#">zm_assault</a></td>
                                <td class="v"><span class="votes_count" id="votes_count4">3</span><span class="vote_buttons" id="vote_buttons4"><a href="#" class="vote" id="4"></a></span></td>
                            </tr>
                        </table>
</div>


CSS:
Код
.server {
    margin-bottom: 10px;
    background-color: #083f59;
    padding-bottom: 4px;
    border-radius: 3px;
    -o-border-radius: 3px;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
}

.headservers {
    color: #fff;
    padding: 10px 15px;
    text-transform: uppercase;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

table.t {
    width: 100%;
    table-layout: fixed;
    font-size: 15px;
    border-left: 1px solid #083f59;
    border-right: 1px solid #083f59;
}

table.t tr:nth-child(even), table.g tr:nth-child(even) {
    background-color: #f2f2f2;
}

table.t tr:nth-child(odd), table.g tr:nth-child(odd) {
    background-color: #e3e3e3;
}

table.t tr:hover {
    background-color: #d3d3d3;
}

table.t tr th {
    height:25px;
    line-height:25px;
    background:#1f5975;
    font-size:14px;
    color:#aaa;
}

tr {
    display:table-row;
    vertical-align:inherit;
    border-color:inherit;
}

th {
    text-align:left;
}

table.t tr td {
    padding: 1px 0;
    height: 25px;
    border-bottom: 1px solid #083f59;
   vertical-align:middle;
}

table.t tr td.o {
    width: 20px;
    text-align: center;
    padding: 0 5px 0 5px;
}

table.t tr td.servername {
    width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.t tr td.serverip {
    width: 160px;
    text-align: center;
}

table.t tr td img {
    width:38px;
    height:28px;
    margin:0;
    vertical-align:middle;
}

table.t tr td.v {
    width:60px;
   font:18px 'CuprumBold', Arial, Helvetica, sans-serif;
    text-align: center;
}

table.t tr td.v a.rur {
    display:inline-block;
    width:40px;
    height:20px;
    background:url("../img/vip.png") no-repeat 0 0;
    margin:0 auto;
   vertical-align: middle;
}

img {display:inline-block; vertical-align:middle;}

table.t tr td a {color: #083f59;}
table.t tr td a:hover {text-decoration: none;}

table.t tr.color-1 td {background:#eeff00;color:#000;}
.color-1 a {color:#000 !important;}
.color-1:hover a {color:#000;}
table.t tr:hover.color-1 td {background:#bfc92c;color:#000;}   

table.t tr.color-2 td {background:#66CC33;color:#000;}
.color-2 a {color:#000 !important;}
.color-2:hover a {color:#000;}
table.t tr:hover.color-2 td {background:#00CC33;color:#000;}   

table.t tr.color-3 td {background:#FF0000;color:#f2f2f2;}
.color-3 a {color:#f2f2f2 !important;}
.color-3:hover a {color:#fff;}
table.t tr:hover.color-3 td {background:#d00000;color:#fff;}
Изменено: Дмитрий Мальцев - 23 Октября 2016 20:37

Комплексное SEO продвижение в поисковых системах Яндекс, Google

Вам к спецу бы обратитсяsmile:)
Явно понятно, что где-то лишняя высота указана у элементов которые внутри ячеек вставлены.
Т.е высота строки таблицы совпадает с высотой элемента внутри ячейки.
При этом не учитываете высоту бордюра потому и наложение элемента на бордюр.
В действительности вы знаете предмет только в той степени, в которой можете научить других, с тем чтобы они его поняли и применили в своей жизни.
В целом офф топ, но я 3+ года не смотрю на ИЕ при проверки на кроссбраузерность. Там на сегодня уже мизер, а тот мизер кто его юзает, не стоит мучений подгона под горе ИЕ. Тоже самое с моб. версией, ниже 3.5 дюйма экраны не волнуют, что и как там им показывает.
Цитата
Дмитрий Мальцев пишет:
Верстаю шаблончик и когда дело начало подходить к концу начал проверку на кроссбраузерность. Все вроде бы хорошо, да вот в IE 11 криво встает таблица, причем, хочу заметить, таких таблиц на странице будет несколько, но кривая только первая. По нижнему бордюру видно что некоторые столбцы съезжают вниз + правый бордюр на 1px вправо уходит у всех таблиц.



Может есть те, кто знает в чем моя ошибка?

html:
Код
  <div class="server">
                        <div class="headservers">Игровые сервера Counter-Strike 1.6</div>
                        <table class="t">
                            <tr>
                                <th style="width:20px;text-align:center;">#</th>
                                <th style="width:280px;">НАЗВАНИЕ СЕРВЕРА</th>
                                <th style="width:160px;text-align:center;">IP-АДРЕС СЕРВЕРА</th>
                                <th style="width:60px;text-align:center;">ИГРОКИ</th>
                                <th style="width:40px;">&nbsp;</th>
                                <th style="width:140px;">&nbsp;&nbsp;КАРТА</th>
                                <th class="v" style="width:60px;text-align:center;">ГОЛОСА</th></tr>
                            </tr>
                            <tr class="color-1">
                                <td class="o">1</td>
                                <td class="servername"><a alt="cs" title="cs" href="#"><img src="img/icons/cs.png" style="width:16px;height:16px;" /></a>&nbsp;&nbsp;<a href="#">[DM] Server Counter-Strike: Source v34 by DaBags</a></td>
                                <td class="serverip"><img src="img/flags/RU.png" style="width:16px;height:16px;" />&nbsp;255.255.255.255:27015</td>
                                <td style="width:60px;text-align:center;">64/64</td>
                                <td style="width:40px;text-align:center;"><img src="img/maps/de_dust.jpg"></td>
                                <td style="width:140px;">&nbsp;&nbsp;<a alt="de_dust" title="de_dust" href="#">de_dust</a></td>
                                <td class="v"><a href="#" class="rur"></a></td>
                            </tr>
                            <tr class="color-2">
                                <td class="o">2</td>
                                <td class="servername"><a alt="cs" title="cs" href="#"><img src="img/icons/cs.png" style="width:16px;height:16px;" /></a>&nbsp;&nbsp;<a href="#">Public Server Counter-Strike 1.6 by DaBags #212</a></td>
                                <td class="serverip"><img src="img/flags/RU.png" style="width:16px;height:16px;" />&nbsp;255.255.255.255:27016</td>
                                <td style="width:60px;text-align:center;">12/32</td>
                                <td style="width:40px;text-align:center;"><img src="img/maps/de_dust2.jpg"></td>
                                <td style="width:140px;">&nbsp;&nbsp;<a alt="de_dust2" title="de_dust2" href="#">de_dust2</a></td>
                                <td class="v"><span class="votes_count" id="votes_count4">9</span><span class="vote_buttons" id="vote_buttons4"><a href="#" class="vote" id="4"></a></span></td>
                            </tr>
                            <tr class="color-3">
                                <td class="o">3</td>
                                <td class="servername"><a alt="cs" title="cs" href="#"><img src="img/icons/cs.png" style="width:16px;height:16px;" /></a>&nbsp;&nbsp;<a href="#" id="link">GunGame Server Counter-Strike: GO</a></td>
                                <td class="serverip"><img src="img/flags/RU.png" style="width:16px;height:16px;" />&nbsp;255.255.255.255:27017</td>
                                <td style="width:60px;text-align:center;">17/32</td>
                                <td style="width:40px;text-align:center;"><img src="img/maps/default.jpg"></td>
                                <td style="width:140px;">&nbsp;&nbsp;<a alt="de_dust2" title="de_dust2" href="#">gg_lego_arena_cs16</a></td>
                                <td class="v"><span class="votes_count" id="votes_count4">8</span><span class="vote_buttons" id="vote_buttons4"><a href="#" class="vote" id="4"></a></span></td>
                            </tr>
                            <tr>
                                <td class="o">4</td>
                                <td class="servername"><a alt="cs" title="cs" href="#"><img src="img/icons/cs.png" style="width:16px;height:16px;" /></a>&nbsp;&nbsp;<a href="#" id="link">Zombie Server Counter-Strike 1.6</a></td>
                                <td class="serverip"><img src="img/flags/RU.png" style="width:16px;height:16px;" />&nbsp;255.255.255.255:27018</td>
                                <td style="width:60px;text-align:center;">31/32</td>
                                <td style="width:40px;text-align:center;"><img src="img/maps/cs_assault.jpg"></td>
                                <td style="width:140px;">&nbsp;&nbsp;<a alt="de_dust2" title="de_dust2" href="#">zm_assault</a></td>
                                <td class="v"><span class="votes_count" id="votes_count4">3</span><span class="vote_buttons" id="vote_buttons4"><a href="#" class="vote" id="4"></a></span></td>
                            </tr>
                            <tr>
                                <td class="o">5</td>
                                <td class="servername"><a alt="cs" title="cs" href="#"><img src="img/icons/cs.png" style="width:16px;height:16px;" /></a>&nbsp;&nbsp;<a href="#" id="link">Zombie Server Counter-Strike 1.6</a></td>
                                <td class="serverip"><img src="img/flags/RU.png" style="width:16px;height:16px;" />&nbsp;255.255.255.255:27018</td>
                                <td style="width:60px;text-align:center;">31/32</td>
                                <td style="width:40px;text-align:center;"><img src="img/maps/cs_assault.jpg"></td>
                                <td style="width:140px;">&nbsp;&nbsp;<a alt="de_dust2" title="de_dust2" href="#">zm_assault</a></td>
                                <td class="v"><span class="votes_count" id="votes_count4">3</span><span class="vote_buttons" id="vote_buttons4"><a href="#" class="vote" id="4"></a></span></td>
                            </tr>
                        </table>
</div> 


CSS:
Код
 .server {
    margin-bottom: 10px;
    background-color: #083f59;
    padding-bottom: 4px;
    border-radius: 3px;
    -o-border-radius: 3px;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
}

.headservers {
    color: #fff;
    padding: 10px 15px;
    text-transform: uppercase;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

table.t {
    width: 100%;
    table-layout: fixed;
    font-size: 15px;
    border-left: 1px solid #083f59;
    border-right: 1px solid #083f59;
}

table.t tr:nth-child(even), table.g tr:nth-child(even) {
    background-color: #f2f2f2;
}

table.t tr:nth-child(odd), table.g tr:nth-child(odd) {
    background-color: #e3e3e3;
}

table.t tr:hover {
    background-color: #d3d3d3;
}

table.t tr th {
    height:25px;
    line-height:25px;
    background:#1f5975;
    font-size:14px;
    color:#aaa;
}

tr {
    display:table-row;
    vertical-align:inherit;
    border-color:inherit;
}

th {
    text-align:left;
}

table.t tr td {
    padding: 1px 0;
    height: 25px;
    border-bottom: 1px solid #083f59;
   vertical-align:middle;
}

table.t tr td.o {
    width: 20px;
    text-align: center;
    padding: 0 5px 0 5px;
}

table.t tr td.servername {
    width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.t tr td.serverip {
    width: 160px;
    text-align: center;
}

table.t tr td img {
    width:38px;
    height:28px;
    margin:0;
    vertical-align:middle;
}

table.t tr td.v {
    width:60px;
   font:18px 'CuprumBold', Arial, Helvetica, sans-serif;
    text-align: center;
}

table.t tr td.v a.rur {
    display:inline-block;
    width:40px;
    height:20px;
    background:url("../img/vip.png") no-repeat 0 0;
    margin:0 auto;
   vertical-align: middle;
}

img {display:inline-block; vertical-align:middle;}

table.t tr td a {color: #083f59;}
table.t tr td a:hover {text-decoration: none;}

table.t tr.color-1 td {background:#eeff00;color:#000;}
.color-1 a {color:#000 !important;}
.color-1:hover a {color:#000;}
table.t tr:hover.color-1 td {background:#bfc92c;color:#000;}   

table.t tr.color-2 td {background:#66CC33;color:#000;}
.color-2 a {color:#000 !important;}
.color-2:hover a {color:#000;}
table.t tr:hover.color-2 td {background:#00CC33;color:#000;}   

table.t tr.color-3 td {background:#FF0000;color:#f2f2f2;}
.color-3 a {color:#f2f2f2 !important;}
.color-3:hover a {color:#fff;}
table.t tr:hover.color-3 td {background:#d00000;color:#fff;} 
Попробуйте здесь

Код
table.t tr th {
    height:25px;
    line-height:25px;
    background:#1f5975;
    font-size:14px;
    color:#aaa;
}



убрать .t или tr или оба их
Изменено: video-freelancer - 25 Октября 2016 12:09
Страницы: 1
Похожие темы:
Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)