問題タブ [browser-bugs]

HTML5ファイル（http://jsfiddle.net/Jbfw2/）に次のインラインSVGコードがあります。

このコードは、SafariとFirefoxで正しい結果を生成します。ただし、Chromeはすべての垂直線を表示するわけではありません。X方向ではなくに変換holder1すると、Chromeは垂直線を正しく表示します。54.5

これがバグかどうか誰かに教えてもらえますか？

私たちのウェブサイトは、IE 6-8 を除くすべてのブラウザーで見栄えがします。多くの CSS3 機能を使用していません。これらは単なる古い IE レンダリング バグ (マージンやパディングなど) です。IE 固有の修正を適用する前に、これらの典型的なバグを修正するために適用できる JavaScript ライブラリを誰か知っているかどうか疑問に思っていました。

更新:前述したように、必ずしも「最新の」CSS3 機能や HTML5 を使用しているわけではないため、これらは IE が他のすべてのブラウザーとは異なる方法でレンダリングする IE 8 の典型的なバグです。

サード パーティの Web サイトにインストールされているコード スニペットがあります。詳細には触れられませんが、<script>タグを使用して HTML、CSS、および JS をページにロードします。

コードの一部は、このリンクがクリックされたときに実行される JS 関数です。

関数の実行を妨げる JS エラーがページにある場合、リンクをクリックすると、明らかにハッシュが URL に追加され、ユーザーはページの上部に移動します。これは予期されるフォールバック動作です。

ただし、多数の JS エラーがあるサード パーティのサイトでは、リンクをクリックすると、トップ レベル ドメインの後のすべてが削除され、ハッシュが追加され、そのページ (ホームページ) に移動します。たとえば、リンクはユーザーを次の場所から取得します。

に

特に、この問題は Firefox と Chrome で発生しますが、IE9 では発生しません。詳細なコードがなければ問題を適切に診断できないことは承知していますが、それを提供する自由はありません。この奇妙なブラウザの動作について、合理的な説明が得られることを願っています。

少しでも役に立てば、問題のサイトは WordPress ブログです。前もって感謝します。

編集: JS をオフにしてインスペクターとのリンクを追加すると同じ動作が発生するため、これは明らかにサイト上の JS が原因ではありません。

ショートストーリー：

ここにjsfiddle。Chrome 21、Firefox 15、IE9では動作が一貫して間違っているため、CSS仕様について何か誤解しているように思われます。

長い話：

行の高さを使用して画像を垂直方向に中央揃えにします。画像コンテナの高さを線の高さに設定し、すべての要素の余白、パディング、境界線をリセットしましたが、画像は本来あるべき位置より2ピクセル下にあります。これは、画像がコンテナよりも小さいか、それよりも大きいかどうかに関係なく発生します（この場合、以前max-width: 100; max-height: 100%はサイズを小さくしていました）。

どちらの場合も、画像のピクセル数は偶数です。コンテナよりも小さい画像の場合はそれほど気にしませんが、大きい画像の場合は、コンテナの背景から2ピクセルの線が画像の上部にブリードスルーします。

FFとChromeでこのデモを見てから、以下を削除します。

-webkit-transform:translateZ(0px);

css を作成し、Chromeでもう一度確認します。

また、コンテンツを切り取るChrome本体コンテナーも作成します (常にではありません)。min-width:100%

-webkit-transform:translateZ(0px);一度に多くの要素に対して transformX + Y を使用すると、Chrome で奇妙で奇妙なブラック ボックスが表示されるのを防ぐ必要があります。

更新:これは Chrome のバグとして特定されています。(ありがとう@マイケル・ロビンソン)

Chrome (少なくとも v22) では、contentEditable が無効になった後でも、スペルチェックの「赤い波線」の下線が残る可能性があることに気付きました。

デモ用に jsfiddle を作成しました: jsfiddle demo。

spellcheck="false"無効にする前に属性を設定してもcontentEditable残ります。

これを解決または回避する良い方法を知っている人はいますか? コンテンツが編集可能な場合は、組み込みのスペル チェック機能を保持するのが理想的です。

これはブラウザによって拒否されていますか？出来ますか？

もしそうなら、それを可能にするブラウザのバグですか? 私はこれに気づきました：

http://html5sec.org

これらのバグを閉じて、Web サイトでの動作を防ぐにはどうすればよいでしょうか? 誰かが別のドメインから JavaScript を実行しようとしているかどうかを検出できますか?

ありがとう。

これは奇妙なバグであり、Safari でのこの問題を除いて、サイトはすべてのブラウザで完全に動作します (バージョン 5.1.7 でテスト中)。ここに私のサイトへのリンクがあります。

http://www.enrista.co.za/new-swap/?page_id=1669

プラス記号をクリックしてウィジェット領域を開くと、私が話している問題が表示されます。ウィンドウのサイズ変更イベントが正常になるまで、テキストとdivはずれます。また、この問題はニュース レターとソーシャル メディア ウィジェットでのみ発生することにも気付きました。他のウィジェットを試してみましたが、正常に動作しました。テーマの構築に何ヶ月も懸命に取り組んだ後、このバグに失望しました。

ブラウザの CSS、HTML、Javascript のバグを文書化した確かなリソースが見つからないことに驚きました。明らかに、http ://caniuse.com/やhttp://www.quirksmode.org/のような別の方向から物事を取り入れ、機能の実装を文書化し、時にはバグや部分的に実装された機能に注目するサイトがありますが、ブラウザごと/ブラウザのバージョンごとに既知のバグと回避策をリストしますか?