Table 格式问题和功能不工作

Question

我编写了一个简单的井字游戏。当 table 出现时，它全部被压扁。有没有办法让 table 保持空而不被压扁？此外，我正在使用 NotePad++，当我尝试运行我的程序在 FireFox 中时，这些功能不起作用。我不确定为什么，有人知道吗？我可以让它在 Chrome 中工作，但它需要能够在 FireFox 中工作。这是我的程序：

<html>
<head>
    <style>
        .Square{
        width:60px;
        height 60px;
        text-align:center;
        font-size: 18pt;
        font-weight: bold;
        font-family: Verdana;
        }
    </style>

        <script>
            function startGame()
                {
                    for (var i = 1; i<= 9; i = i + 1)
                    {
                        clearBox(i);
                    }

                document.turn = "X";
                if (Math.random()< 0.5)
                {
                    document.turn = "O";
                }
                document.winner = null;
                setMessage(document.turn + " gets to start.");
            }

            function setMessage(msg)
            {
            document.getElementById("message").innerText = msg;
            }

            function nextMove(square)
            {
                if (document.winner != null)
                {
                    setMessage(document.winner + " Already Wone the Game!");
                }
                else if (square.innerText == "")
                {
                    square.innerText = document.turn;
                    switchTurn();
                }
                else
                {
                    setMessage("That Square is Already Used.")
                }
            }

            function switchTurn()
            {
                if(checkForWinner(document.turn))
                {
                    setMessage("Contratulations " + document.turn + "! You Win!");
                    document.winner = document.turn;
                }
                    else if (document.turn == "X")
                        {
                            document.turn ="O";
                            setMessage("It's " + document.turn + "'s turn!");
                        }
                    else
                    {
                        document.turn ="X";
                        setMessage("It's " + document.turn + "'s turn!");
                    }
            }

            function checkForWinner(move)
            {
                var result = false;
                if(checkRow(1,2,3, move) || 
                   checkRow(4,5,6, move) || 
                   checkRow(7,8,9, move) ||
                   checkRow(1,4,7, move) ||
                   checkRow(2,5,8, move) ||
                   checkRow(3,6,9, move) ||
                   checkRow(1,5,9, move) ||
                   checkRow(3,5,7, move))
                   {
                    result = true;
                   }
                    return result;
            }

            function checkRow(a,b,c, move)
            {
                var result = false;
                if (getBox(a)== move && getBox(b)== move && getBox(c)== move)
                {
                result = true;
                }
                return result;
            }

            function getBox(number)
            {
                return document.getElementById("s" + number).innerText;
            }

            function clearBox(number)
            {
                document.getElementById("s" + number).innerText = "";
            }

        </script>

</head>

<body onload= "startGame();">
    <h1> Tic-Tac-Toe!</h1>
    <div id="message">message will be here </div>
    <table border= "1">
        <tr>
            <td id="s1" class= "Square" onclick="nextMove(this);"></td>
            <td id="s2" class= "Square" onclick="nextMove(this);"></td>
            <td id="s3" class= "Square" onclick="nextMove(this);"></td>
        </tr>
        <tr>
            <td id="s4" class= "Square" onclick="nextMove(this);"></td>
            <td id="s5" class= "Square" onclick="nextMove(this);"></td>
            <td id="s6" class= "Square" onclick="nextMove(this);"></td>
        </tr>
        <tr>
            <td id="s7" class= "Square" onclick="nextMove(this);"></td>
            <td id="s8" class= "Square" onclick="nextMove(this);"></td>
            <td id="s9" class= "Square" onclick="nextMove(this);"></td>
        </tr>
    </table>
    <a href= "javascript:startGame();"> Start New Game</a>
</body>
</html>

Answer 1

您在 height: 60px;

中的 height 之后忘记了一个 :

最初，我建议添加 td {height: 40px;} 但是...只需添加 : 就可以了。

<style>

    td {height: 40px;} //nevermind, you don't need this

    .Square{
        width:60px;
        height: 60px; //I JUST REALIZED YOU FORGOT A : 
        text-align:center;
        font-size: 18pt;
        font-weight: bold;
        font-family: Verdana;    }

</style>

Answer 2

Replace 

    <style>
        .Square{
        width:60px;
        height 60px;
        text-align:center;
        font-size: 18pt;
        font-weight: bold;
        font-family: Verdana;
        }
    </style>

With

<style>
        .Square{
        width:60px;
        height:60px;
        text-align:center;
        font-size: 18pt;
        font-weight: bold;
        font-family: Verdana;
        }
    </style>

you missed : after height.

Table 格式问题和功能不工作

Table Format Issues and Functions not working

html

javascript

firefox

html-table

function