Question

我在Firefox中使用它没有问题。该程序是Chrome隐藏输入框底部下方的文本。我认为Chrome只使用body标签的字体和高度，并完全忽略类作为一个愚蠢的东西，它认为无效的愚蠢值，因为它导致一个超薄的输入框，这是设计的。用户只想在“_”中加上“加下划线”字母。

注意：Flex框不起作用，因为Flex框是关于移动到适合屏幕的内容。我正在尝试做一些更类似于Word查找的内容，用户只需在输入框中输入“=”，表示它们正在强调字母。我需要输入框和字母垂直和水平排列。

更新：完全关闭屏幕后，Flex框将换行到下一行。我不想要一个为我思考的代码。我知道我想要的东西。此外，Flex盒子不会让INPUT盒允许显示输入！ Flex盒子与输入盒没有任何关系。问题是Chrome需要一个HACK强制其上帝代码停止在我的页面上玩神。这就是为什么我认为我会扔掉Chrome并只使用Firefox。至少Firefox实际上允许我的CSS而不是忽略它，因为IT认为IT最了解！

我尝试过的事情：

更改字体大小增加和减小大小。
注释掉/不注释高度，垂直对齐，行高值。谢谢！

编辑：HTML和更新的CSS，并给了JS。

<tr>
<td> &nbsp; </td>
<td class="grey"> Q </td>
<td class="grey"> A </td>
<td class="grey"> F </td>
<td class="grey"> O </td>
<td class="grey"> U </td>
<td class="grey"> R </td>
</tr>

<tr>
<td> &nbsp; </td>
<td><input class="zthin" type="text" name="c1" size="1"> </td>
<td><input class="zthin" type="text" name="c2" size="1"> </td>
<td><input class="zthin" type="text" name="c3" size="1"> </td>
<td><input class="zthin" type="text" name="c4" size="1"> </td>
<td><input class="zthin" type="text" name="c5" size="1"> </td>
</tr>

CSS更新：

BODY {
background-color: #000000;
background-image:       url(/w5jyz84kw0dle38f19s0xceydkoyjs/velvela/gaming/2/word/xw/xwcss/ngc3.jpg);
background-repeat: repeat-y;
background-position: top left;
border: 0px; height: 100%; width: 100%;
margin: 0px 0px 0px 0px;
}

input.zthin { 
background-color: #c1c1c1;
border: 2px solid #0000ff;
font-size: 10pt;
height: 10pt;
line-height: 10pt;
padding:0px;
width:20px;
z-index: 1;
}

JS：

<script type="text/javascript">

function jyzcrossWord(){
if (document.form.c1.value=="-"
&& document.form.c2.value=="-"
&& document.form.c3.value=="-"
&& document.form.c4.value=="-"
&& document.form.c5.value=="-"
)
  alert("Congratulations! All is correct!")

else {alert("Not correct. Please check your answers.")}
}
</script>

最后，当我将' - '放入输入框时，我根本看不到它。如果把'm'我只看到'm'的上半部分。在Firefox中，它正确显示。此外，灰色等级并不重要，因为css的那部分不是问题。谢谢！

当用户输入“ - ”时，它不会显示在Chrome的输入框中，但可以在Firefox中使用

0 个答案: