我有一个非常简单的TicTacToe游戏，可以在Fedora中与Firefox完美配合，但当我使用基于 chrome 的浏览器或Windows时，"X"和"O"放错了位置，字体也没有使用。
var c=0
function a(b){
"X"!=document.getElementById(b).innerHTML&&"O"!=document.getElementById(b).innerHTML&&0==c?(document.getElementById(b).innerHTML="X",c=1):
"X"!=document.getElementById(b).innerHTML&&"O"!=document.getElementById(b).innerHTML&&1==c&&(document.getElementById(b).innerHTML="O",c=0)
z()
}
function r(b){for(c=0;8>=b;b++)document.getElementById(b).innerHTML=""}
function z(){
"X"==document.getElementById(0).innerHTML&&"X"==document.getElementById(1).innerHTML&&"X"==document.getElementById(2).innerHTML?x():
"X"==document.getElementById(3).innerHTML&&"X"==document.getElementById(4).innerHTML&&"X"==document.getElementById(5).innerHTML?x():
"X"==document.getElementById(6).innerHTML&&"X"==document.getElementById(7).innerHTML&&"X"==document.getElementById(8).innerHTML?x():
"X"==document.getElementById(0).innerHTML&&"X"==document.getElementById(3).innerHTML&&"X"==document.getElementById(6).innerHTML?x():
"X"==document.getElementById(1).innerHTML&&"X"==document.getElementById(4).innerHTML&&"X"==document.getElementById(7).innerHTML?x():
"X"==document.getElementById(2).innerHTML&&"X"==document.getElementById(5).innerHTML&&"X"==document.getElementById(8).innerHTML?x():
"X"==document.getElementById(0).innerHTML&&"X"==document.getElementById(4).innerHTML&&"X"==document.getElementById(8).innerHTML?x():
"X"==document.getElementById(2).innerHTML&&"X"==document.getElementById(4).innerHTML&&"X"==document.getElementById(6).innerHTML?x():
"O"==document.getElementById(0).innerHTML&&"O"==document.getElementById(1).innerHTML&&"O"==document.getElementById(2).innerHTML?o():
"O"==document.getElementById(3).innerHTML&&"O"==document.getElementById(4).innerHTML&&"O"==document.getElementById(5).innerHTML?o():
"O"==document.getElementById(6).innerHTML&&"O"==document.getElementById(7).innerHTML&&"O"==document.getElementById(8).innerHTML?o():
"O"==document.getElementById(0).innerHTML&&"O"==document.getElementById(3).innerHTML&&"O"==document.getElementById(6).innerHTML?o():
"O"==document.getElementById(1).innerHTML&&"O"==document.getElementById(4).innerHTML&&"O"==document.getElementById(7).innerHTML?o():
"O"==document.getElementById(2).innerHTML&&"O"==document.getElementById(5).innerHTML&&"O"==document.getElementById(8).innerHTML?o():
"O"==document.getElementById(0).innerHTML&&"O"==document.getElementById(4).innerHTML&&"O"==document.getElementById(8).innerHTML?o():
"O"==document.getElementById(2).innerHTML&&"O"==document.getElementById(4).innerHTML&&"O"==document.getElementById(6).innerHTML&&o()
}
function x(){alert("Ha guanyat X!");c=2}
function o(){alert("Ha guanyat O!");c=2}body{background-color:#001c5a}
button{
cursor:pointer;
font-family:Tahoma;
font-weight:bolder;
font-size:xx-large;
}
#s{
cursor:default;
margin: 2%;
color:white
}
#q{
width:30rem;
display:flex;
flex-wrap:wrap;
border:solid #c1133d
}
#q button{
display:flex;
flex-direction:column;
width:10rem;
height:10rem;
padding-top:3.5rem;
background-color:#84C7D6;
color:#000;
border:solid #c1133d
}
#x {
width:30rem;
margin: 2%;
padding:2% 2%;
background-color:#c1133d;
color:white;
border:0;
border-radius:66px
}<html>
<head>
<link rel="stylesheet" href="b.css">
<script src="c.js"></script>
<title>3 en ratlla</title>
</head>
<body>
<center>
<h1 id="s">A jugar!</h1>
<div id="q">
<button id="0" onclick="a(0)"></button>
<button id="1" onclick="a(1)"></button>
<button id="2" onclick="a(2)"></button>
<button id="3" onclick="a(3)"></button>
<button id="4" onclick="a(4)"></button>
<button id="5" onclick="a(5)"></button>
<button id="6" onclick="a(6)"></button>
<button id="7" onclick="a(7)"></button>
<button id="8" onclick="a(8)"></button>
</div>
<button id="x" onclick="r(0)">Tornar a començar</button>
</center>
</body>
</html>我试过不同的浏览器和操作系统，它应该工作，但有时不工作。idk为什么在windows中它不使用我想要的字体。
浏览器：
- 火狐
- chrome
- 谷歌浏览器
溶液（非工作溶液）：
- 文本对齐
- 正当性内容
- 垂直对齐
2条答案
按热度按时间a0zr77ik1#
尝试使用display：flex，效果很好。
5vf7fwbs2#
为按钮给予Flexbox样式：
把上面的衬垫拿掉。
x一个一个一个一个x一个一个二个一个x一个一个三个一个