我有一个固定宽度的文本框。我正在努力解决浏览器兼容性问题。当我在 Firefox 中修复宽度时,Chrome 显示不正确,它向右显示更多长度。
更新了我的代码
HTML
<form name="welcomeDiv1" id="welcomeDiv1">
<tr class="unsortable" >
<tr>
<td>
<input type="text" class="textbox_form" name="content" id="content" />
</td>
<td>
<input type="text" class="textbox_form2" name="content2" id="content2"/ >
</td>
<td>
<input type="text" class="textbox_form3" name="content3" id="content3"/ >
</td>
<td>
<input type="text" class="textbox_form4" name="content4" id="content4" />
</td>
<td>
<input type="text" class="textbox_form5" name="content5" id="content5"/ >
</td>
<td>
<input type="text" class="textbox_form6" name="content6" id="content6" />
</td>
<td> <input type="submit" class="textbox_form7" value="+" name="submit" class="globalinsert_button"/></td>
</tr>
</form>
CSS
.textbox_form {
margin:0 0 0 1px;
width:162px;
height:30px;
background-color:#C2FFC2;
}
.textbox_form2 {
margin:0 0 0 -3px;
width:329px;
height:30px;
background-color:#C2FFC2;
}
.textbox_form3 {
margin:0 0 0 -3px;
width:386px;
height:30px;
background-color:#C2FFC2;
}
.textbox_form4 {
margin:0 0 0 -3px;
width:138px;
height:30px;
background-color:#C2FFC2;
}
.textbox_form5 {
margin:0 0 0 -2px;
width:158px;
height:30px;
background-color:#C2FFC2;
}
.textbox_form6 {
margin:0 0 0 -2px;
width:204px;
height:30px;
background-color:#C2FFC2;
}
.textbox_form7 {
margin:0 0 0 17px;
}
我需要在所有浏览器中将文本框完全放置在同一位置。但还是一样的问题
最佳答案
您的样式属性未关闭,请检查。
像这样尝试单独的 css 样式:在每个文本框中添加类 'textbox_form'
<style>
.textbox_form {
margin-left: 5px;
margin-top: 5px;
width: 150px;
background-color:#C2FFC2;
}
</style>
<td>
<input type="text" class="textbox_form" name="content" id="content" border:0px">
</td>
关于html - 如何使所有浏览器的文本框宽度相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18915766/