2

私のウェブサイトは、Firefox Opera と Chrome で正常に動作していました (私は IE を持っていないので、fedora Linux 18 を使用しているため、それについてはわかりません)。Chrome の最近の更新後 (最長で 1 か月前)、ページが正しくレンダリングされませんでした。何が変わったのか知っている人はいますか? 次のように display:table-cell を使用しているため、ボックス モデルの解釈方法が変わったのではないかと疑っています。

 <div id="midboxmidleft" style="display: table;">
    <div style="display: table-cell; vertical-align: middle; width: 100%;">
          <div id="sideleft">
          <ul>
          <li>blahblah</li>
          <li>blahblah</li>
          <li>blahblah</li>
          <li>blahblah</li>
          <li>bla blah</li>
          </ul>
          </div>
      </div>
 </div>

...右も同様（垂直方向のセンタリングを実現するため）

また、マウスオーバーでいくつかのぎこちなさが発生するため、このcssも使用していることに言及したいと思います。

li :hover{background-color:#fff;-moz-opacity:.500;filter:alpha(opacity=50);opacity:.50;}

マークアップは正常に検証されました。CSS 検証では、いくつかのエラーが報告されていますが、問題ではないと思います。

問題を確認したい場合は、ここに私のウェブサイトへのリンクがあります。

これは検証済みのページの状態を反映しているため、java-script を無効にして確認することをお勧めします。

この問題の重要なポイントは、この問題の原因となった Chrome の最近の変更点を突き止めることです (私のコードは検証済みですが、まだ間違っている可能性があるため)。使用されているレンダリング エンジンに関する変更ログがどこにあるか知っている場合は、お知らせください。どんな助けでも大歓迎です！

4

1 に答える 1

2

あなたの正確な問題が何であるかはわかりませんが、ボックスモデルで何かが変わったというあなたのようなものだと思いbox-sizingます.ブラウザ間で分割するのが少し難しくなるボックス、このプロパティを次のように適用できます

CSS

*,*:before,*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

また、要素のすべてのデフォルトのマージンとパディングをリセットする CSS リセットを使用することをお勧めします。それを使用する場合は、独自のマージンの ect を追加する必要があります (CSS リセット) が、デフォルトのマージンを解釈するさまざまなブラウザーの問題を修正します。違う。これが役立つことを願っています.CSSリセットへのリンクがあります.別のスタイルシートに追加して、他のスタイルシートの前にリンクしてください. ここにリンクがあります http://www.cssreset.com/scripts/eric-meyer-reset-css/

PS: IE 9 と打撃で最も問題が発生する傾向がありますが、IE の問題を解決するのに役立つ簡単な修正プログラムが公開されています。 / IE9 を使用します。

編集お読みください!重要

コードを見て、問題を解決するには、45 行目height: 48%のクラスから行を削除する必要があります。これにより、フリックの問題が解決されますが、位置を修正する必要があります。.midimageandreas.css

于 2013-04-01T04:01:01.147 に答える