0

私は自分のウェブサイトのナビゲーションのトラブルシューティングを試みてきました。（sequoiawaste.com）問題はiPhoneとInternetExplorer7で発生しdisplay:table-cell;ます。CSSプロパティを使用してタブを1行に保持しました。ただし、2つの問題があるようです。

1）モバイルデバイス（特にiPhone、ただしiPadは除く）では、行が青い背景を超えて伸び、ページの検索機能が不自然に非表示になります。

2）IE 7では、を無視しdisplay:table-cell;、実際にリンクを垂直方向に向けます。これは、atable-rowが作成するものと同じです。

#globalnav私の知る限り、問題を引き起こす可能性のある、enhanced.CSSファイルで定義されているプロパティはほんの一握りです。

私が気付いたのは、表示値が状態によって異なることです。テーブルからテーブルセル、そしてブロックへと変化します。それらのいずれか（またはすべてを同じディスプレイに）変更すると、問題が悪化するだけです。

誰かがここで何をすべきかについていくつかの指針を持っていますか？非常に難しい問題ではないと思います。ここで壁にぶつかっているだけです。

** アップデート **

私は使い始めましfloat:leftたが、それは両刃の剣でした-見た目は良くなりましたが、同様のフォーマットを取得するには、各アンカーを特定の幅に設定する必要がありました。これで、検索バーをクリックしても、アンカーのサイズが動的に変更されることはありません。

うーん。任意のヒント？

4

1 に答える 1

0

代わりに試してくださいfloat: left-これにより、クロスブラウザのサポートが大幅に向上します。また、各アイテムの幅を設定する必要があります。また、見栄えを良くするために、他のいくつかのプロパティを設定する必要があります。

編集：はい、を使用float: leftすると、ナビゲーション要素の個別のサイズ変更が停止します。これは、ブラウザのテーブルレイアウトアルゴリズムを使用せずに行うのは難しい場合があります。あなたが試すことができる他のいくつかのアプローチがあります：

  • 検索バーの幅をアニメーション化するときは、すべてのナビゲーションアイテムの幅も同時にアニメーション化します（ただし、これは遅い場合があります）
  • 実際にテーブルを使用します（これはマークアップとプレゼンテーションの大きな分離ではありませんが、CSSが制限される場合があります）
  • 詳細については、条件付きコメントを使用してIEを「だまして」テーブルをレンダリングします（https://stackoverflow.com/a/4193681/106302を参照）（ただし、これはモバイルデバイスの問題には対処しません）

選択したアプローチによっては、モバイルデバイスに特別なルールを提供する必要があります。私はその効果が好きですが、別のデザインを使用する方が実用的かもしれません。

于 2012-06-14T19:17:46.247 に答える