3

ブートストラップ入力テキストの高さのサイズに問題があります。標準のbootstrap.cssスタイルシートを使用しており、検索フォームはナビゲーションバー内にあります。

<div class="navbar  navbar-fixed-top m-header">
    <div class="navbar-inner m-inner">
        <div class="container-fluid">
            <div class="row-fluid">
                ...

<!-- // START SEARCH BAR -->
<div class="span6 offset4">             
    <form>
      <div class="input-append" id="top-search">
        <input type="text" placeholder="Search...">
        <div class="btn-group">
            <button class="btn" tabindex="-1">Search</button>
            <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
            <li><label class="radio">
              <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
              <i class="icon-search"></i>aaa
            </label></li>
            <li class="divider"></li>
            <li><label class="radio">
              <input type="radio" name="optionsRadios" id="optionsRadios1" value="option2" checked>
              <i class="icon-th"></i>bbb
            </label></li>
            <li><label class="radio">
              <input type="radio" name="optionsRadios" id="optionsRadios1" value="option3" checked>
             <i class="icon-file"></i>ccc
            </label></li>
            <li><label class="radio">
              <input type="radio" name="optionsRadios" id="optionsRadios1" value="option4" checked>
              <i class="icon-inbox"></i>ddd
            </label></li>
            <li><label class="radio">
              <input type="radio" name="optionsRadios" id="optionsRadios1" value="option5" checked>
              <i class="icon-camera"></i>eee
            </label></li>
            </ul>
        </div>
      </div>
    </form>
</div>
<!-- // END SEARCH BAR -->
...

Firefox：

Firefox

クロム：

クロム

調査を行ったところ、間違ったDoctypeを使用していた可能性がありますが、ブートストラップガイドに従い、HTML5Doctypeをすでに設定していました。

<!DOCTYPE HTML>
<html lang="en">
  <head>

また、Linuxの「file」および「more」を使用して、ファイル内にガベージ文字が含まれていないかどうかを確認しましたが、そうではありません。

要素の検査ツールで入力されたテキストの高さを上書きまたはオフにすると、高さが正しく表示されます。ここで言及されているように：https ：//github.com/twitter/bootstrap/issues/246#issuecomment-7295682 それでも、キャレットボタンのサイズは小さく表示されます。

ただし、ブートストラップ自体のWebサイトでテキスト入力が正しく表示されている理由がわかりません。http： //twitter.github.com/bootstrap/base-css.html#forms 同じ問題が発生しないのはなぜですか。

4

1 に答える 1

2

はい、実際のソースコードを見ると、HTMLの前に出力されたコードがあったため、HTMLのDoctypeが設定されていなかったことを確認できます。呼び出されている最初のファイルの最初の行に移動し、現在は機能しています。ドー！

于 2013-01-12T12:42:27.603 に答える