Firefox abgeschnitten unteren Ende der Tabelle

Bearbeiten: Aktualisiert den Code leicht basierend auf Ihren Kommentaren.Firefox abgeschnitten unteren Ende der Tabelle

Edit 2: Live-Beispiel: lachniet.com/chessboard

Ich versuche, eine Kombination aus HTML, CSS und JS ein leeres Schachbrett zu ziehen. Mein Code mit CSS und JS inline ist dies:

<!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>

nun dieser Code funktioniert 52. Doch für mich in Chrome völlig in Ordnung, in 47 Firefox, die untere Reihe abgeschnitten wird. Überraschenderweise funktioniert dieser Code sogar in IE 11 und Edge 12 (alles unter Windows 10 Enterprise 64-Bit).

Dies scheint ein Problem für Firefox zu sein. Hat jemand eine Idee warum?

Quelle

2016-08-07 Julian Lachniet

'document.body.style.margin = '0px';'? warum nicht CSS 'body {margin: 0;}' Auch, wenn nicht notwendig, benutze 'document.write' nicht. http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice –

Wie @ RokoC.Buljan ist dies eine Anmerkung über das Abnehmen Ihrer js, indem Sie stattdessen css verwenden: Sie konnten 'tun #board {border-collapse: collapse; Höhe: 40vw; width: 40vw;} #board td {Rand: 1px fest # 000; Höhe: 12,5%;} #board tr: nth-child (ungerade) td: nth-child (gerade), #board tr: n-te Kind (gerade) td: n-te Kind (ungerade) {Hintergrund: # 000; Farbe: #fff;} 'und dann einfach' für (var row = 0; row <8; Zeile ++) {draw + = '';} ' – henry

Können Sie uns einen Screenshot des Problems geben? Diejenigen, die FF aus irgendeinem Grund nicht benutzen können, können immer noch ihre beste Vermutung geben oder Dinge vorschlagen, die sie ausprobieren können. – Whothehellisthat

Das Problem liegt in versteckten Grenzen und Auffüllen. Auch der Browser berechnet die Höhe neu, wenn die Summe weniger als 100% beträgt. Das ist CSS, das für mich in Edge, FF und GC funktioniert.

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; 
    }

Als Bonus brauchen Sie nicht .tile-black und .tile-white Klassen.

/*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; 
    }

Quelle

2016-08-07 22:05:26

Firefox abgeschnitten unteren Ende der Tabelle

Antwort

Verwandte Themen