ホームページ ウェブフロントエンド CSSチュートリアル ie7が認識しない場合!重要【レイアウト解決策】_体験交流

ie7が認識しない場合!重要【レイアウト解決策】_体験交流

May 16, 2016 pm 12:09 PM

IE7 が登場する前は、IE と FF のレイアウトの違いを解決するために ! important を使用していましたが、IE7 が登場すると、 ! important は IE7 では機能せず、IE7 の解釈方法が FF や IE6 の解釈方法と異なる場合がありました。今回は、新しい問題が発生しました。! important を使用すると、IE6 は解決できますが、IE7 では解決できません。このように、同じ Web ページでも、ブラウザによって表示される効果は異なります。これは一昨日の問題です。レイアウト中に、最初に効果を確認できます。http://www.zishu.cn/blogview.asp?logID=553

または、以下のコードを実行して同じ効果を確認します。


コードをコピー コードは次のとおりです:





zishu.cn test

本文{ font-size:12px; 行の高さ:1.8; font-family:Verdana、「宋体」、Arial、Sans; テキスト整列:中央; 背景:#FFF; 色:#666; マージン:50ピクセル; パディング:0; リストスタイル:なし; }
a:リンク、a:訪問済み{color:#000099; text-decoration: underline;}
a:hover,a:active{color:#000;text-decoration: none;}
#zishu_test li{ float:left; 幅:14%;テキスト配置:中央; マージン:0 自動; list-style:none }
#zishu_test li a{border-right:1px solid #fff;border-bottom:1px solid #fff; 幅:100ピクセル; 高さ:110ピクセル; 背景:#fff;表示:ブロック; パディングトップ:10px; margin:auto}
#zishu_test li img{ width:75px; 高さ:75ピクセル; 表示:ブロック; テキスト整列:中央; マージン:自動; 背景:#FFF; パディング:3px; border:1px solid #D8A18B;}
#zishu_test li span{display:none;}
#zishu_test li a:hover span{ margin-top:-10px;display:block; border-bottom:1px solid #666; border-right:1px solid #666; 背景:#FA9000; 幅:100ピクセル; 色:#FFF; 位置:絶対; }
* html #zishu_test li a:hover span {margin-left:-8px; } /* IE6 */
*+html #zishu_test li a:hover span {margin-left:-8px; }/* IE7*/
#zishu_test li a:hover{ border-right:1px solid #D8A18B;border-bottom:1px solid #D8A18B; 幅:100ピクセル; 高さ:110ピクセル; 背景:#F5F5F5;表示:ブロック; padding-top:10px;}







この例では、
プログラム コード
*+html #zishu_test li a:hover span {margin-left:-8px; }/* IE7*/
の行を削除すると、 IE7 では違いがあります。

この問題を解決するために、http://www.blueidea.com/tech/site/2006/3626.asp の方法を調べました。プログラマとレイアウト担当者は同じ人ではないため、このメソッドは制御が困難です。

次のコードです。 >

コードをコピー
コードは次のとおりです。* html #zishu_test li a:hover span {margin-left:-8px; } /* IE6 */ *+html #zishu_test li a:hover span {margin-left:-8px; }/* IE7*/

これは IE6 および IE7 用のメソッドです。 ;
"*+html" は ie7 と ie5.01 で使用されます。ie7 と ie5.01 を区別する非常に簡単な方法があります。これは重要です。これは、別のシステムを形成するために重要です。 ie7のハック方法。
例:

*+html div.IE7 {
width:200px;
width:100px;
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Redwood.jsと動物相を使用してイーサリアムアプリを構築します Redwood.jsと動物相を使用してイーサリアムアプリを構築します Mar 28, 2025 am 09:18 AM

最近のビットコインの価格が20k $ $ USDを超えており、最近30Kを破ったので、イーサリアムを作成するために深く掘り下げる価値があると思いました

Vue 3 Vue 3 Apr 02, 2025 pm 06:32 PM

それは' Vueチームにそれを成し遂げてくれておめでとうございます。それは大規模な努力であり、長い時間がかかったことを知っています。すべての新しいドキュメントも同様です。

ブラウザから有効なCSSプロパティ値を取得できますか? ブラウザから有効なCSSプロパティ値を取得できますか? Apr 02, 2025 pm 06:17 PM

私はこの非常に正当な質問で誰かに書いてもらいました。 Leaは、ブラウザから有効なCSSプロパティ自体を取得する方法についてブログを書いています。それはこのようなものです。

CI/CDで少し CI/CDで少し Apr 02, 2025 pm 06:21 PM

「ウェブサイト」は「モバイルアプリ」よりも適していると言いますが、Max Lynchからのこのフレーミングが好きです。

粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカード 粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカード Apr 03, 2025 am 10:30 AM

先日、Corey Ginnivanのウェブサイトから、この特に素敵なビットを見つけました。そこでは、スクロール中にカードのコレクションが互いに積み重ねられていました。

WordPressブロックエディターでのマークダウンとローカリゼーションを使用します WordPressブロックエディターでのマークダウンとローカリゼーションを使用します Apr 02, 2025 am 04:27 AM

WordPressエディターでユーザーに直接ドキュメントを表示する必要がある場合、それを行うための最良の方法は何ですか?

レスポンシブデザインのブラウザを比較します レスポンシブデザインのブラウザを比較します Apr 02, 2025 pm 06:25 PM

これらのデスクトップアプリがいくつかあり、目標があなたのサイトをさまざまな次元ですべて同時に表示しています。たとえば、書くことができます

フレックスレイアウト内の紫色のスラッシュ領域が誤って「オーバーフロー空間」と見なされるのはなぜですか? フレックスレイアウト内の紫色のスラッシュ領域が誤って「オーバーフロー空間」と見なされるのはなぜですか? Apr 05, 2025 pm 05:51 PM

フレックスレイアウトの紫色のスラッシュ領域に関する質問フレックスレイアウトを使用すると、開発者ツールなどの混乱する現象に遭遇する可能性があります(D ...

See all articles