10

このトピックが他のトピックとよく似ていることは知っていますが、既存のすべてのスレッドを調べましたが (とにかく「ほとんど」)、ヘルプを使用できる問題がまだ残っています ...

この問題は、他の人が説明したものとあまり似ていません。

  • 特定の FORM 要素の垂直方向の高さが完全に表示されない
  • これらの中で最も注目に値するのは、ボタンまたは「アドオン」クラスの隣に座っているときに、INPUTタイプのサイズが貧弱に見えることです。
  • 最近、私はさらに深刻な問題に気付きました... ラジオ ボタンは、小さすぎてほとんど見えないため、「ラジオ ドット」になります。

現在、多くの人が、HTML ドキュメントの先頭でDOCTYPEを正しく指定することで問題を解決しています。私も、この単純な調整が私の静的な HTML モックアップでうまくいくことを発見しました。悲しいことに、Wordpress に切り替えたときに問題が再発しましたが、HTML 5 DOCTYPE 署名を出力の一番上に置いていることは間違いありません (「ソースを表示」で何度か確認しました。マインド）。

これがこれに光を当てるのに役立つ場合に備えて、画面の簡単なスナップショットを含めました. ここで見つけることができます: http://www.flickr.com/photos/14261777@N00/6957941282/ . 下部にあるラジオ ボタンと思われる小さな点に注意してください。より明白なのは、高さが十分でない INPUT フィールドです。ああ、また完全を期すために、ここに私の HTML ソースがどのように開始されるかのスクリーンショットがあります: http://www.flickr.com/photos/14261777@N00/6957952802/。

なぜこれが発生するのか、および存在する可能性のある回避策についての理論を持っている人から聞いてみたいです (解決策のソースが不明であっても)。line-height、height、min-height などの CSS 属性と、その他のいくつかの属性をゼロ効果で課そうとしました。

4

2 に答える 2

10

2 つの問題があるようです。input type=text問題とradioボタンの問題。コードを表示しないと、テキスト ボックスの問題が関連してDOCTYPEおり、ラジオ ボタンの問題が CSS スタイルのオーバーライドに関連しているように見えます (ラジオ ボタンのインスペクター出力を投稿するかどうかを確認できます)。

変数が正しい値 (例: 高さ 18 ピクセル) として表示されている場合、それは間違いなくDOCTYPE問題です。

A List Apartのこの記事から：

適切な処理をすべて実行しましたが、最新のブラウザーでサイトが適切に表示または動作しません。

有効な XHTML と CSS を記述しました。W3C 標準のドキュメント オブジェクト モデル (DOM) を使用して、動的なページ要素を操作しました。しかし、まさにこれらの標準をサポートするように設計されたブラウザーでは、サイトは機能しません。欠陥のある DOCTYPE が原因である可能性があります。

この短い記事では、機能する DOCTYPE を紹介し、これらの一見抽象的なタグが実際に及ぼす影響について説明します。

W3C で推奨されている DOCTYPE のリストは次のとおりです。

http://www.w3.org/QA/2002/04/valid-dtd-list.html

于 2012-04-23T14:49:59.543 に答える
1

誰かが興味を持っている場合は、問題を解決するために追加したものを次に示します。

input, input[type="text"], input[type="radio"], isindex, .uneditable-input {
    padding: 4px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #CCC;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #CCC;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #CCC; 
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #CCC;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.input-append .add-on, .input-append .btn {
    margin-left: -6px;
}

input[type=checkbox] {
        -webkit-appearance: checkbox;
}
于 2012-04-23T21:45:13.780 に答える