MacOS X下Chrome浏览器中Input标签默认样式问题

在MacOS X下的Chrome浏览器中,给提交按钮直接设置高度不起作用

代码如下:

MacOS X下Chrome浏览器中Input标签默认样式问题_第1张图片

在Chrome浏览器中显示如下图;

MacOS X下Chrome浏览器中Input标签默认样式问题_第2张图片

在Firefox浏览器中显示如下图;

MacOS X下Chrome浏览器中Input标签默认样式问题_第3张图片

针对谷歌的这种情况,用一般的清除样式代码如去除内外边距并没有生效,

Chrome和safari会为提交按钮添加一个user agent提供的样式,

首先查找到的处理方式是声明文件类型,尝试过修改为HTML4.01和XHTML,都无法解决;

后来发现,需要重新设置提交按钮的背景或者边框属性去覆盖默认样式才能使高度生效.


类似的问题也发生在输入框上,

在chrome上显示输入框时,若不为其添加边框或者背景属性,浏览器会自动将一个名为border-style的属性添加到输入框上,其值为inset,导致上边框看上去会较深,同样需要手动覆盖对应的属性才能解决。

你可能感兴趣的:(MacOS X下Chrome浏览器中Input标签默认样式问题)