Question

我正在使用html 5.我的表单中有一个输入字段，以下是代码

<input name="address" id="address" type="text" onFocus="if(this.value =='Address' ) this.value=''" onBlur="if(this.value=='') this.value='Address'" value="Address">

输入字段的css为

input#address{ width:411px; border:0px; height:50px; line-height:50px; padding-left:15px;}

问题是宽度。文本字段宽度与Firefox不同，即7.如何解决此问题？

Answer 1

浏览器有自己的默认样式，如果您希望页面看起来相同，浏览器使用css reset然后手动设置元素样式。

Answer 2

您现在用于显示属性，如此

input#address{
display:block;
}

Answer 3

尝试重置输入元素的填充和边距

input {
    margin:0;
    padding:0;
}

Answer 4

我不建议删除填充或边框，因为这会改变要求。

原因是不同的浏览器有不同的盒子模态

有时候在页面中添加doctype可以解决问题，但情况并非总是如此。

您可以使用以下代码确保您的框在所有主流浏览器中显示相同。

input#address{
  width:411px;
  border:0px;
  height:50px;
  line-height:50px;
  padding-left:15px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

文本字段css问题

4 个答案: