2

どうすれば変更できますか？一番上は、Firefox、Chrome、Safari でキャプションの背景画像を扱います。一番下は、IE がキャプションの背景画像をどのように扱うかです。ファイアフォックスの例IE の例

これが私の Web ページの画像のコードです (オンラインで見つけた画像スライド ショー ツールを使用しています)。

<a href="BlogPosts.aspx" id="iview"> <!--When making a slide show, make sure the ID property is set to "iview" -->
    <!-- Slide 1 -->
    <div data-iview:image="placeImages/FLASH1-Ephesus.jpg">
    <!-- Caption 1 -->
        <div class="iview-caption" data-x="400" data-y="400" data-transition="wipeRight" data-speed="700"><h3>The Library at Celsus</h3>Ephesus, Turkey</div>
    </div>
    <!-- Slide 2 -->
    <div data-iview:image="placeImages/FLASH2-HAGIA.jpg">
    <!-- Caption 2 -->
        <div class="iview-caption" data-x="100" data-y="400" data-transition="wipeRight" data-speed="700"><h3>Hagia Sophia</h3>Istanbul, Turkey</div></div>
    <!-- Slide 3 -->
    <div data-iview:image="placeImages/FLASH3-Bosphorus.jpg">
    <!-- Caption 3 -->
        <div class="iview-caption" data-x="400" data-y="100" data-transition="wipeRight" data-speed="700"><h3>The Bosphorus Straits</h3>Istanbul, Turkey</div></div>
    <!-- Slide 4 -->
    <div href="About.aspx" data-iview:image="placeImages/FLASH4-BlueMosque.jpg">
    <!-- Caption 4 -->
        <div class="iview-caption" data-x="400" data-y="50" data-transition="wipeRight" data-speed="700"><h3>The Blue Mosque</h3>Istanbul, Turkey</div></div>
    <!-- Slide 5 -->
    <div data-iview:image="placeImages/FLASH5-Sirince.jpg">
    <!-- Caption 5 -->
        <div class="iview-caption" data-x="100" data-y="100" data-transition="wipeRight" data-speed="700"><h3>Sirince Village</h3>Sirince, Turkey</div></div>
</a>

スライドショー ツールが使用する 2 つのスタイルシートの関連コードを次に示します。

スキン 1/style.css:

.iview-caption {
    background: url('../../img/caption-bg.png');
    color: #FFF;
    border-radius: 7px;
    padding: 10px;
    font-family: Verdana;
    font-size: 12px;
    text-shadow: #000 1px 1px 0px;
}

スライドショー ツールのメイン スタイルシートは次のとおりです。

iview.css

.iview-caption {
    position: absolute;
    z-index: 4;
    overflow: hidden;
    cursor: default;
}
4

4 に答える 4

2

これは .png ファイルとは関係ありません...問題はテキストです。

Internet Explorer には、他の一部のブラウザーとは微妙に異なるテキストの配置規則があります。その結果、IE の動作に対応するために、スタイル シート内のテキストに、必要だと思っていたよりも少し多くのスペースを確保したい場合があります。これを修正するには、data-x と data-y の値を少し大きく設定するだけでよいようです。

試してみることができるもう 1 つの小さなトリックは、 を設定することです。これはzoom:1、IE に適切なサイズを設定させ、他のブラウザーのように動作させる方法です。

他のすべてが失敗した場合は、改行なしのスペースを使用して、Internet Explorer が次のように行を折り返す場所をなくすことができます。

The&nbsp;Library&nbsp;at&nbsp;Celsus
于 2013-09-13T03:40:35.363 に答える
0

これを解決するには、CSS の条件付きコメントを使用できます。

たとえば、次のように記述できます。

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

ie のカスタム css コードを配置する ie.css ファイルを作成します。

または、これを使用することもできます：

<!--[if IE]>
    <style type="text/css">
       put your code here
    </style>
<![endif]-->
于 2013-09-13T02:09:31.507 に答える
0

キャプションのタイトルが改行に分割されているため、壊れています。<h3>...</h3>キャプション divをリセットすることをお勧めします。コンテナの幅も確認してください。キャプションが展開するスペースが増えるように、それを増やします。これで問題が解決しない場合は、リンクを共有していただけますか?

于 2013-09-13T02:22:19.937 に答える