1

下面是我的html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
input {
    width: 100px;
    display: block;
    height: 10px;
    padding: 0 0 0 0px;
}
</style>
<input name="page_search" placeholder="Quick search..." type="text">
<body>
</body>
</html>

在 Firefox 中看起来像下面

火狐

在 chrome 中，如下所示

铬合金

但是输入（我认为它的' padding'）在Firefox和cromo中看起来不同，为什么？

4

7 回答 7

1

我认为你只需要玩一些风格。还可以考虑使用 CSS 重置文件来重置浏览器中的所有默认样式设置。

我尝试了以下 css，它在 Firefox 和 Chrome 中看起来都足够接近：

input {
    width: 100px;
    display: block;
    height: 10px;
    padding: 0 0 0 0px;
    font-size: 9px;
    border: solid 1px gray;
    color: gray;
}

在这里小提琴：http: //jsfiddle.net/5nbu6/3/

于 2013-05-29T09:47:56.640 回答
1

只需将填充更改为自动。

在这里检查解决方案

于 2013-05-29T12:40:16.887 回答
1

根据您的文本长度和宽度自动删除高度

于 2013-05-29T09:46:32.687 回答
0

您可以使用 CSS 重置来删除所有浏览器默认样式并减少浏览器不一致。流行的包括： http: //meyerweb.com/eric/tools/css/reset/和http://necolas.github.io/normalize.css/用于 HTML5。

于 2013-07-26T16:36:04.270 回答
0

尝试这个，

input {
    width: 100px;
    display: block;
    height: 20px;
    padding: 2px;
    font-size: 9px;
    border: solid 1px gray;
    color: gray;
    font-size:12px;
    line-height:15px;
}

jsFiddle 文件

于 2013-05-29T09:50:08.057 回答
0

你也应该设置font-size: 10px;。这些浏览器中的每一个都有其他默认输入文本字体大小。

于 2013-05-29T11:45:15.973 回答
-1

代码看起来不错，尝试为 chrome 添加这个支持标签

<meta http-equiv="X-UA-Compatible" content="chrome=1">
于 2013-05-29T11:36:41.580 回答