0

クライアントのWebサイトにHTML5Boilerplateシステム（http://html5boilerplate.com/）を使用しようとしていますが、特定のブラウザーおよび特定のデバイスでサイトを表示すると、組み込みの.irクラスで問題が発生します。つまり、 IE7といくつか（またはすべて）のブラックベリーは、私の側のフィードバックとテストに基づいています。これらの状況では、デザインのメインナビゲーションおよびその他の要素が表示されない/ナビゲートできません。クライアントは大規模なビジネス地区に対応するレストランであるため、残念ながら、多くの見込み客と顧客がまだIE7を使用している企業システムを使用しており、サイトをそのまま使用することはできません。

関連するページへのリンクは次のとおりです：
www.vb3restaurant.com

vb3restaurant.com/index-pizza.html

これが私が問題であると信じている.irクラスです（それは何か他のものである可能性がありますが）：

.ir {表示：ブロック; ボーダー：0; テキストインデント：-999em; オーバーフロー：非表示; 背景色：透明; background-repeat：no-repeat; text-align：左; 方向：ltr; *行の高さ：0; }

誰かが私に「壊れている」もの、または画像の置換やその他の技術を使ってこのデザインを達成するためのより良い/クロスブラウザ/IEフレンドリーな方法について正しい方向を示すことができれば非常にありがたいです。

私は決してエキスパートプログラマーではありませんが、いくつかのサイトを立ち上げ、いくつかの異なるフレームワークやCMSなどを使用して作業しました。このサイトや他の場所で回答を探してみましたので、よろしければ事前にお詫び申し上げます。この質問に答える明らかなスレッドが欠落している、または間違った場所で、または間違って質問した場合。
そしてもちろん-あなたの時間と助けに前もって感謝します！

最高、AB

4

2 に答える 2

1

irクラスはコンテンツを非表示にしています(text-indent:-999em改善: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ )。

ただし、これらの項目を置き換えるイメージにはnth-child、IE7 または IE8 で認識されない新しいセレクターがあります: http://kimblim.dk/css-tests/selectors/。残念ながら、これらのブラウザーのレンダリング エンジンは、nth-childセレクターよりも古いものです。

jQuery shim を記述して、セレクターにパッチを適用することもできます: http://verboselogging.com/2010/01/17/making-nth-child-work-everywhere。または、すべてのブラウザーのセレクターを書き直して、メニュー項目に ID またはクラス名を指定します。

最悪ですよね？まあ、それは画像の置き換えだと思う人もいます！(特に低帯域幅のモバイル デバイスの場合) そのため... IE 固有のスタイルシートを使用してプレーン テキストのスタイルを設定する IE7/8 の image-raplacement を使用することを忘れることもできます。

于 2012-06-29T20:29:17.427 に答える
0

私はそれがこのルールだと思います：

#mainNav ul li:nth-child(1) a {
表示ブロック;
背景画像: url(../images/home-nav-test.png);
バックグラウンドリピート: リピートなし;
背景位置: 40px -35px;
}

代わりに、各ナビゲーション アイテムでクラスを使用します。

于 2012-06-29T20:32:26.303 に答える