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では以下のようになります

ファイアフォックス

クロムでは以下のようです

クロム

しかし、入力 (' padding' だと思います) は、Firefox と Cromo で異なって見えるのはなぜですか?

4

7 に答える 7

1

パディングを auto に変更するだけです。

ここで解決策を確認してください

于 2013-05-29T12:40:16.887 に答える
1

テキストの長さと幅に応じて自動的にかかる高さを削除します

于 2013-05-29T09:46:32.687 に答える
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 に答える
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 に答える