0

私はCSS3PIEを使用して、他のブラウザーのスタイルシートで取得するInternetExplorerの要素にいくつかの丸みを帯びた角を適用しています。しかし、私はそれに関していくつかの問題に遭遇しました。

IE8で、PIEの動作をする要素が奇妙に動作することを発見しました。コンテナは数ピクセル右にジャンプしますが、コンテンツは元の位置に留まり、コンテンツがすべてコンテナに対して左にシフトしたように見えます。これは、パディングがないか少量の要素で特に問題になります。

X-UA-Compatibleを使用することで、IE8の問題を回避することができましたが、可能な限りこの解決策は避けたいと思います。テストのためにIE9にアクセスすることはできませんが、PIEのようなハックを理解する必要はなく、互換モードを必要としないブラウザーで互換モードを強制するのは無駄です。

私はIE6でさらに悪い問題を抱えており、リスト項目を使用するように設定されたリストでPIEレイアウトが完全に壊れていdisplay:inline; zoom:1;ます(IE8や他のブラウザーで機能するインラインブロックをシミュレートするため)。ここでは、リストアイテムの境界線が完全に間違った場所にレンダリングされます。

したがって、理想的には、互換モードに頼ることなく、IE6およびIE8でPIEを適切に機能させたいと考えています。IE6に関する限り、PIEが適用されていない場合の適切なフォールバックで十分です。IE7は、ページが意図したとおりに表示される唯一のブラウザーです。

残念ながら、現時点ではサンプルページを提供することはできませんが、後で追加することはできます。

ファローアップ:

IEテスターで作成されたスクリーングラブをいくつか示します。彼らが皆のために物事をもう少し明確にすることを願っています。ご覧のとおり、IE7は問題ありません。ただし、IE8では、コンテナーはコンテンツに対して左にオフセットされており、IE6ではリスト要素(丸みを帯びた1ピクセルの境界線)は完全に混乱しています。

オフセットボックスを備えたInternetExplorer8 IE7は正しい IE6は本当に壊れています!

IE8IE7IE6のフルサイズバージョンも利用可能です

フォローアップ2

こちらがデモページへのリンクです。

他のデザイナーがスタイルシートやデザインの他の部分に取り組んでいるので、それが非常に長い間完全に反射し続けることを約束することはできませんが、うまくいけば、問題を解決するのに十分長い間そうなるでしょう。(はい、IE6にJSエラーがあることは承知していますが、それは私の問題ではありません)。
サンプルページ

4

3 に答える 3

1

私はhttp://www.curvycorners.net/を使用することを好みます

于 2011-01-10T10:13:08.510 に答える
1

IE8でも同様の問題が発生していました。PIEが適用された要素は、最初に10〜20ピクセル下に表示され、次に適切な位置にジャンプします。ルール「display:inline」を要素に適用すると、問題が解決したようです。「位置:相対;」要素または親要素の「ズーム:1」は効果がないようです。

少し変です。ルール「display:inline」を適用すると、更新時に問題が発生しなくなります。ただし、ルールを削除しても、ブラウザウィンドウを閉じて再度開くまで、更新しても問題ないように見えます。その後、ジャンプが再び表示されます。

それが誰かを助けることを願っています。

于 2011-06-01T03:07:23.910 に答える
0

追加してみてください

position:relative;
z-index: 0;

ここで提案されているようにhttp://css3pie.com/forum/viewtopic.php?f=3&t=10

この質問は、ここに投稿された質問と似ています:CSS3 PIE-IEボーダー半径サポートを提供していませんか?

于 2011-01-14T14:49:28.050 に答える