Firefox, отсекающий нижнюю часть таблицы

Редактировать: Немного обновил код на основе ваших комментариев.Firefox, отсекающий нижнюю часть таблицы

Edit 2: Живой пример: lachniet.com/chessboard

Я пытаюсь использовать сочетание HTML, CSS и JS вытягивать пустую шахматную доску. Мой код с CSS и JS инлайн это:

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
    <title>TitaniumChess</title> 
    <style> 

html,body { 
    margin: 0; 
    padding: 0; 
} 

#board { 
    border: 1px solid #000; 
    border-collapse: collapse; 
    float: left; 
    height: 50vw; 
    width: 50vw; 
} 

.tile-white { 
    height: 12.5%; 
    width: 12.5%; 
} 

.tile-black { 
    background-color: #000; 
    color: #fff; 
    height: 12.5%; 
    width: 12.5%; 
} 

    </style> 
</head> 
<body> 
<table id="board"></table> 
<script> 

var board = document.getElementById('board'); 
var draw = ''; 
var letters = 'abcdefgh'; 
for (var column = 8; column > 0; column--) { 
    draw += '<tr id="' + column + '">'; 
    for (var row = 0; row < 8; row++) { 
    draw += '<td id="' + letters.charAt(row) + column + '" class="'; 
    if ((row + column) % 2 == 1) { 
     draw += 'tile-black'; 
    } else { 
     draw += 'tile-white'; 
    } 
    draw += '">test</td>'; 
    } 
    draw += '</tr>'; 
} 
board.innerHTML = draw; 

</script> 
</body> 
</html>

Теперь этот код отлично работает для меня в Chrome 52. Тем не менее, в Firefox 47, нижняя строка обрезается. Удивительно, но этот код отлично работает даже в IE 11 и Edge 12 (All на Windows 10 Enterprise 64-Bit).

Это, кажется, проблема, характерная для Firefox. Кто-нибудь знает, почему?

источник

2016-08-07 Julian Lachniet

'document.body.style.margin = '0px';'? почему бы не CSS 'body {margin: 0;}' Также, если не нужно, не используйте 'document.write'. http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice –

Как @ RokoC.Buljan это примечание о похудении ваших js с помощью css вместо: вы можете сделать ' #board {border-collapse: collapse; height: 40vw; width: 40vw;} #board td {border: 1px solid # 000; height: 12.5%;} #board tr: nth-child (odd) td: nth-child (четный), #board tr: nth-child (even) td: nth-child (odd) {background: # 000; color: #fff;} ', а затем просто' for (var row = 0; row <8; row ++) {draw + = '';} ' – henry

Не могли бы вы дать нам скриншот проблемы? Те, кто не может использовать FF по какой-либо причине, все еще могут дать свое лучшее предположение или предложить что-то попробовать. – Whothehellisthat

Проблема заключается в скрытых границах и прокладках. Также браузер пересчитывает высоту, если сумма меньше 100%. Это css, который работает для меня в Edge, FF и GC.

html, body { 
     margin: 0; 
     padding: 0; 
    } 
    #board { 
     float: left; 
     height: 50vw; 
     width: 50vw; 
     border: 1px solid #000; 
     border-collapse: collapse; 
     padding:0; 
    } 
    #board td{ /*All td are created equal*/ 
     height: 10%; /*Let browser recalculate*/ 
     width: 12.5%; 
     border:none 0px; /*remove borders explicitly */ 
     padding:0; 
    } 
    .tile-white { 
    } 
    .tile-black { 
     background-color: #000; 
     color: #fff; 
    }

В качестве бонуса, вам не нужно .tile-black и .tile-white классов.

/*Odd td in even tr and even td in odd tr*/ 
    #board tr:nth-child(2n) td:nth-child(2n+1), 
    #board tr:nth-child(2n+1) td:nth-child(2n) 
    { 
     background-color: #000; 
     color: #fff; 
    }

источник

2016-08-07 22:05:26

Firefox, отсекающий нижнюю часть таблицы

ответ

Смежные вопросы