html - CSSの位置により、画像のプレビューが半分表示されます

Question

私はプロジェクトに取り組んでおり、woocommerceダイナミックギャラリープロプラグインを使用して製品ページの製品画像をプレビューしています。ただし、問題は、プレビュー画像がIEで半分表示されていることです。

IEで次のリンクを確認して、修正するのを手伝ってください。

修正を見つけましたが、これをどのように適用するのかわかりません。

次のクラスからポジションを削除すると、エラーが修正される場合があります。しかし、私が位置に絶対、相対、固定、静的、さらには継承などの値を与えているとき。私がポジションを離れるまで、それは何の反応もしません。

だからみんな親切にこれを修正するのを手伝ってくれます。

以下は私の変更点です。50％の影響があります。

.ad-gallery .ad-image-wrapper .ad-image {
    overflow: visible !important;
    position: inherit !important;
}

しかし、位置のものは機能していません

score 0 · Accepted Answer

私は現在未亡人のボックスにいませんが、フロートをクリアしていないか、親アイテムにフロートされている子が含まれていない可能性があります。

完全に表示されていない画像の親コンテナでoverflow：autoを使用してみてください。また、overflow：hiddenを使用して同じことを実現することもできますが、場合によってはバーのスクロールを避けてください。

可能であれば、本番サイトで！importantを使用しないようにしてください。

score 0 · Accepted Answer

非常に多くのインラインスタイルを避ける必要があります。コードが煩雑になり、作業が増えます。

何らかの理由でに設定.ad-imageしてい{top: 179px;}ます。これを試してください（インラインのトップステートメントを削除した後）：

.ad-gallery .ad-image-wrapper .ad-image {
    top: 0;
}

奇妙なことに{top: .5px}、Firefox で表示されます。何が起こっているのかわかりません。

score 0 · Accepted Answer

OP、使用している IE のバージョンを教えてください。

position プロパティは、要素に使用される配置方法のタイプ (静的、相対、絶対、または固定) を指定します。

注:値「継承」は、IE7 以前ではサポートされていません。IE8 には !DOCTYPE が必要です。IE9 は「継承」をサポートしています。

IE 7/8 回避策:

.ad-gallery .ad-image-wrapper .ad-image {
    overflow: visible !important;
   position: <whatever-the-parent-is> !important;
}

IE 7/8 は要素の親からの位置を認識しないため、要素で使用するinheritものを指定する CSS ルールを作成できますposition。

3 に答える 3