HTML/CSS google chromeのページ幅全体にハイライト表示されないようにする方法

Question

基本的に、一部のウェブサイトでGoogle Chromeとハイライトテキストを使用すると、強調表示はテキストを強調表示するのではなく、テキストを強調表示すると、ページ全体にまたがって表示されるのではなく、その単語だけがハイライトされるように、CSSを調整する方法を教えてください。見るべき良い例はhttp://guides.rubyonrails.org/getting_started.htmlです。 Google Chromeでコード以外のテキストを強調表示すると、私が何を話しているのかが分かります。

Answer 1

CSSでテキストの選択を防ぐです（これは決して包括的なソリューションを意味することによってではありませんが）私が気づいた唯一の事が浮いていることです要素はあなたが後にしている動作を示します。 This Fiddleは、という宣言があるので、2つのdivsが同一であることを示すライブバージョン（下のスクリーンショット）を表示します。これにより、ページ全体にテキストハイライトが表示されなくなります。

大きな問題であれば（私はそうは言っていますが）、メインのコンテナをフロートさせて、テキストのハイライト表示を制限することができます。 @ solendilの「解決策」は、多大な過度の攻撃であり、視覚的な迷惑にならないように、大きなユーザビリティの欠陥（テキストを選択できないように迷惑をかける）を導入しているようです。

更新：AndreZSの答え@あたりとして、デフォルトstatic以外のposition値を追加することもその要素に強調表示するテキストを制限（私はこの動作は私のオリジナルの答え以来、年に変更されていると思います）。 WebKitに精通している人が、望む動作を引き起こすために正確に何が起こっているのかを説明します。要素のレイアウトとは何か、それがどのように描かれているかのようです。

Answer 2

ハイライトアルゴリズムのマチュニズムを変更することはできません。ハイライトはパディングとマージンに広がりますが、時には面倒です。あなたはどうする可能性は、私のOCDの一部は、このようにも疑問に思いました

-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-o-user-select: none; 
user-select: none; 

Answer 3

.cssファイルには、テキストを含むdivセクションにposition: relative;を使用してください。

Answer 4

.content{ 
    display:inline-block; 
} 

http://jsfiddle.net/V7ahp/4/

容器フロートDIV内部に応じて伸縮しないであろうようCherryFlavourPezによる解決策は、フロートを用いて、さらに複雑につながります。