SafariとChromeの両方で、placeholder属性が目に見えない幅を追加して、水平方向のスクロールバーと水平方向のサイズ変更時にちらつきのようなレンダリングを引き起こします。HTML5プレースホルダテキストSafariで幅を追加するとスクロールバーとフリッカーが発生する
overflow: hidden;は、問題を抑制するために親要素に適用できます。ただし、フォームフィールドのフォーカスエフェクトをクリップします。
::-webkit-input-placeholder {}などのような特定のベンダーのプレフィックス値を使用してこれを防ぐ方法はありますか？
属性をフォーム入力に追加すると、Webkitブラウザで水平方向のサイズを変更すると、水平スクロールバーが点滅します。具体的には、どのようなスタイルがこの動作を引き起こしていますか？そして、この動作をどうやって防ぐか、または無効にするのですか？
多くの入力要素にはデフォルトのパディングがあります。 width: 100%と記述すると、エレメントは幅100％+パディングになります。埋め込みが幅を広げないようにするにはbox-sizing: border-box;
はい、Paul Irishの記事を読んだ後に、from要素のボックスモデルを変更しました。私はteの記事に言及するが、セレクタのようなものを使用してすべての要素に適用されていません。フォーム> * {-moz-box-sizing：border-box; -webkit-box-sizing：ボーダーボックス。ボックスサイズ：border-box;}は大丈夫です。おそらく最もパフォーマンスの高いセレクターではなく、私が遭遇した最高のソリューションです！ http://www.paulirish.com/2012/box-sizing-border-box-ftw/ –
ChromeとSafariで自分のサイトを見ましたが、あなたが言及した問題はないようです。しかし、オーバーフローが隠されていて、ヘッダーのトップマージンを設定していないため、トップイメージがトップにオーバーフローしています。そこで、私は先に進み、そのマージンを作成しました：
#header img {
margin-top: 50px;
}
そしてそれが問題を解決しました。私は画像を投稿することができたらいいと思う。
愛がありますか？私はそれが日曜日だと思う。私はグリッドシステムを使用しているので、かなり継承されたスタイルがありますが、誰かがFireBugを使用して正しい方向に向けることができれば、他のアドバイスは大歓迎です！ –
私は最新バージョンのChromeを使用していますが、ちらつきはありませんでしたか？偶然、CSS3のトランジションやアニメーションを使用していますか？ – Ben
いいえ、input [type = "text"] {width：100％;}以外のすべてのCSSを取り除きました。 }。 PCとMac OSXの主要なブラウザで上記のリンクをテストしました。ブラウザウィンドウを水平にリサイズすると、横のサイドバーが表示され消えます。これは通常大したことではありませんが、レスポンシブデザインに取り組んでおり、モバイルビューポートは基本的にグリッドシステムで「カーテン」になります。 –