IE10以下のimgタグ問題の解決方法

IE10以下のimgタグ問題の解決方法

問題を見つける

以前、簡単なデモを書いたのですが、IE10以下では動作しないことがわかりました。ここにコードの一部を示します。

HTML:

<div class="all" id="box">
    <img id="画像" src="psb.png" 幅="512" 高さ="1470" >
    <span id="上へ"></span>
    <span id="down"></span>
</div>

CS: ...

。全て{ 
    位置: 相対的;
    幅: 512ピクセル; 
    高さ: 400px; 
    境界線: 1px実線 #000; 
    マージン:100px 自動; 
    オーバーフロー: 非表示;
}
スパン{
    幅: 512ピクセル; 
    高さ: 200px; 
    位置: 絶対; 
    左: 0; 
    上: 0; 
    カーソル: ポインタ;
}
#下{ 
    上:自動; 
    下部: 0; 
}

JS:

var ops = document.getElementById('画像'),
    oup = document.getElementById('up')、
    odown = document.getElementById('down')、
    obox = document.getElementById('box'),
    タイマー = null;
    数値 = 0;

oup.onmouseover = 関数(){             
    タイマーの間隔をクリアします。
    タイマー = setInterval(関数(){
        数値 -= 4;
        if(数値 < -1070){
            数値 = -1070;
            タイマーの間隔をクリアします。
        }
        ops.style.marginTop = num+'px';
    },30)
}

odown.onmouseover = 関数(){   
    タイマーの間隔をクリアします。
    タイマー = setInterval(関数(){
        数値 += 4;
        if(数値 > 0){
            数値 = 0;
            タイマーの間隔をクリアします。
        }
        ops.style.marginTop = num+'px';
    },30)
}

obox.onmouseout = 関数(){ 
    タイマーの間隔をクリアします。
}

実現される効果は、マウスが上のスパンに移動すると画像が上に移動し、下のスパンに移動すると画像が下に移動し、マウスを離れると停止することです。

ただし、IE10 より前のバージョンでは、マウスをスパン上に移動しても効果はありません。

複数回のテストを経て、2つの解決策を見つけました。

方法1:

テストの結果、スパンに背景色を追加すると、マウスをその上に移動したときに機能することがわかりました。

コードを追加:

 背景: #fff;
 不透明度: 0;
 フィルター:アルファ(不透明度=0);

背景色を追加し、透明に設定します。不透明度には互換性の問題があるので、フィルターを追加します。最終的な効果は以前とまったく同じです。

方法2:

後で友人に聞いたところ、IE10ではimgタグがネストされるので、divの外側にimgタグを置くようにと言われました。

<img id="画像" src="psb.png" 幅="512" 高さ="1470" >
<div class="all" id="box">       
    <span id="上へ"></span>
    <span id="down"></span>
</div>

要約する

上記はこの記事の全内容です。この記事の内容が皆さんの勉強や仕事に一定の参考学習価値を持つことを願っています。ご質問があれば、メッセージを残してコミュニケーションしてください。123WORDPRESS.COM を応援していただきありがとうございます。

<<:  MySQL-8.0.26 構成グラフィックチュートリアル

>>:  Docker ケース分析: Redis サービスの構築

推薦する

Vueでキャッシュされたページを管理する方法

目次問題1: 破壊1. 破壊する方法2. いつ破壊するか2.1 解決策1: route.queryを...

VUE を使用して Ali Iconfont ライブラリをオンラインで呼び出す方法

序文何年も前、私はサーバー側の初心者でしたが、業界の競争が激しくなるにつれて、フロントエンドの初心者...

MySQL インデックスのパフォーマンス最適化の問題に対する解決策

MySQL によって作成される最適化はインデックスを追加することですが、インデックスを追加しても目的...

MySQL 5.7.27 のインストールと設定方法のグラフィックチュートリアル

MySQL 5.7.27の詳細なダウンロード、インストール、および構成チュートリアルは参考までに、具...

HTML テーブルタグチュートリアル (7): 背景色属性 BGCOLOR

テーブルの背景色は、BGCOLOR 属性を通じて設定できます。基本的な構文<テーブル BGCO...

Tomcatのクラスロードメカニズムのプロセスとソースコード分析

目次序文1. Tomcat クラスローダー構造図: 2. Tomcat のクラスロードプロセスの説明...

div+css3 を使用して背景グラデーション ボタンを実装するためのサンプル コード

フロントエンド ページの需要が増加し続けるにつれて、一部のシーンではグラデーションの背景要素が必要に...

MySQL 最適化 Zabbix パーティション最適化

zabbix を利用する上での最大のボトルネックはデータベースです。zabbix のデータストレージ...

JavaがMySQL 8.0に接続できない問題の解決策

この記事では、参考までにMySQL 8.0に接続できないJavaの問題をまとめて紹介します。具体的な...

TypeScriptのインストールと使用方法と基本的なデータ型

最初のステップはTypeScriptをグローバルにインストールすることですnpmを使用してインストー...

HTML タグのセマンティクス化 (H5 を含む)

導入HTML は、Web ドキュメントのコンテンツのコンテキスト構造と意味を提供します。HTML 自...

MySQL カーソル関数と使用法

目次意味カーソルの役割カーソルの使用カーソルの宣言カーソルを開くカーソルデータのトラバースカーソルを...

MySQLの日付と時刻関数の使用の概要

この記事はMySQL 8.0に基づいていますこの記事では、日付と時刻の操作のための MySQL 関数...

WeChatアプレットでvantフレームワークを使用するための具体的な手順

目次1. アプレットのプロジェクト ディレクトリを開き、ファイルの場所を開きます。 2. プロジェク...

el-table カプセル化に基づくドラッグ可能な行と列、および選択列コンポーネントの実装

効果環境が必要ビュー要素UIドラッグアンドドロッププラグインSortable.js必要な構成プロパテ...