2

PHP、MySQL、CSS、HTML、およびいくつかのスクリプト言語を使用して、最初のサイトを最初から作成しています。出会い系サイトです。私の悪い英語で申し訳ありませんが、それは私の母国語ではありません。私が直面した他のすべての問題/問題の解決策を見つけました。しかし、ブラウザ間の互換性のテストを開始すると、Chromeで奇妙なバグが発生しました。ウェブサイトはこちらhttp://www.writech.net.ee/testsite

このサイトのアイデアは、誰かとデートしたい人は誰でも、自分の連絡先データと説明をフォームに記入して送信するというものです。すべての広告はフローティングdivとして表示されます。これらのdivは左に浮かんでいます。divの高さは固定されているため、誰かがより長い説明を記述し、それがdivに収まらない場合は、スクロールバーが表示されます。説明テキストを保持する必要があるdivは、1pxの赤い境界線で囲まれています。
広告divはIE9とFirefox11で問題ありませんが、Chromeではテキストが多すぎてdivに収まらないため、「オーバーフロー：自動」を適用して、何らかの理由で垂直スクロールバーを表示し、他のdivと比較して高い位置にレンダリングします。最初は、問題はスクロールバーの表示に関連していると思い、「overflow：hidden」を試しました。overflow：hiddenは余分なテキストを非表示にしますが、divは他のdivと比較して高い位置に表示されます。したがって、問題はdivに含まれるテキストの量に関連しています。
私は以前にクロスブラウザ適応の経験がないので、どこを見れば何をすべきかわかりません。どのCSSハックを試すべきか考えている人はいますか？

4

3 に答える 3

3

これが発生するのは少し奇妙だと思いますが、 esのvertical-alignプロパティを設定すると機能します。.boxtop.box {vertical-align: top}

于 2012-04-04T08:55:11.457 に答える
3

以前にも同様の問題があり、 float:left が機能しました。同じ解決策を使用できますが、ボックスを含む div を中央に配置する方法を変更する必要があります。次のようにして、MacbookのChromeで正しく表示されるようにしました（もちろん、スタイリングをCSSファイルに移動できます）：

<div style="margin-left: auto; margin-right: auto; width: 1080px;">
  <div class="box" display="float:left">
    ...
  </div>
  <div class="box" display="float:left">
    ...
  </div>
  ...
</div>
于 2012-04-04T09:24:08.343 に答える
1

.boxクラスにブロック表示（インラインブロックatm）を適用してみて、float：leftをスローすることもできます。（324行目）

于 2012-04-04T08:52:03.430 に答える