Maison interface Web tutoriel CSS Différences et solutions entre CSS sous IE et FIREFOX Page 1/2_Experience Exchange

Différences et solutions entre CSS sous IE et FIREFOX Page 1/2_Experience Exchange

May 16, 2016 pm 12:08 PM

Le CSS est d'une grande valeur pour la compatibilité des navigateurs. Il existe généralement de grandes différences d'analyse entre IE et Firefox. Voici quelques points de compatibilité.
Analyse de la hauteur
IE : changera en fonction de la hauteur du contenu, y compris le contenu de l'image avec une hauteur indéfinie. Même si la hauteur est définie, lorsque le contenu dépasse la hauteur, la hauteur réelle sera utiliséeFirefox : Aucune hauteur n'est définie Lorsque, si le contenu inclut du contenu image, l'analyse de la hauteur de MF est basée sur les normes d'impression, ce qui entraînera une situation où la hauteur est incohérente avec le contenu réel lorsque la hauteur est définie mais que le contenu dépasse la hauteur ; hauteur, le contenu dépassera la hauteur définie. Cependant, les styles utilisés dans la zone ne changeront pas, ce qui entraînera un désalignement des styles.
Conclusion : Il est préférable de définir la hauteur lorsque vous pouvez déterminer la hauteur du contenu. S'il n'y a vraiment aucun moyen de définir la hauteur, il est préférable de ne pas utiliser le style de bordure, sinon le style sera définitivement confus. !

Analyse de l'objet img alt et du titre
alt : invite lorsque la photo n'existe pas ou erreur de chargement
titre : astuce description de la photo ;
Si le titre n'est pas défini dans IE, alt peut également être utilisé comme pointe de img, mais dans MF, les deux sont utilisés exactement comme défini dans la norme

Conclusion : lors de la définition de l'objet img, enfin Écrivez tous les objets alt et title pour vous assurer qu'ils peuvent être utilisés normalement dans différents navigateurs

Autres différences détaillées
Lorsque vous écrivez du CSS, utilisez en particulier float: left (ou right ) Lors de l'organisation des images, vous constateront qu'ils sont normaux dans Firefox mais ont des problèmes dans IE. Peu importe que vous utilisiez margin: 0 ou border: 0 pour contraindre, cela n'aidera pas.

En fait, il y a un autre problème ici, à savoir la façon dont IE gère les espaces. Firefox l'ignore, mais IE gère les espaces entre les blocs. C'est-à-dire qu'un p doit être écrit immédiatement après la fin d'un p, sans retour chariot ni espace au milieu. Sinon, il peut y avoir des problèmes, comme un écart de 3 pixels, et la raison est difficile à trouver.

Malheureusement, j'ai à nouveau rencontré ce problème. Plusieurs balises img sont connectées, puis le float: left est défini. J'espère que ces images pourront être connectées. Mais le résultat est normal dans Firefox mais chaque image affichée dans IE est espacée de 3 pixels. J'ai supprimé les espaces entre les balises mais cela n'a pas fonctionné.

La dernière solution consistait à envelopper li en dehors de img et à définir margin : 0 pour li. Cela a résolu l'écart d'affichage entre IE et Firefox. L'interprétation de certains modèles par IE produira de nombreuses erreurs, et ce n'est que grâce à des tentatives répétées que les raisons pourront être découvertes.

2. DIV imbriqué : Solution au problème selon lequel la hauteur du DIV parent ne peut pas changer automatiquement en fonction du DIV enfant

<div id="parent"> 
<div id="content"> </div> 
</div>
Copier après la connexion
Quand il y a beaucoup de contenu, même si le le parent définit la hauteur sur 100 % ou auto, dans L'étirement automatique ne fonctionne toujours pas correctement sous différents navigateurs. Solution

<div id="parent"> 
<div id="content"></div> 
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div> 
</div>
Copier après la connexion
Créez un espace d'une hauteur de 1 en bas du calque pour résoudre ce problème

3. Notes d'étude CSS DIV

1. Le div de chaque bloc doit avoir son propre identifiant, pour empêcher des blocs avec des fonctions différentes d'utiliser le même identifiant/classe


2. Chaque div de bloc plus grand est suivi d'un Mark le début et la fin

3. Une autre façon de masquer le texte TEXT-INDENT : -9999px; LINE-HEIGHT : 0

4. Gérer intelligemment la juxtaposition Deux colonnes :

1 )

La colonne de droite est P, width=44,5%, float=left
La colonne de gauche est P.first, border-right : #a7a7a7 1px solid, width=45%
2)
colonne de droite#right, margin-left:50%
colonne de gauche#left, float=left,width=50% border-right:#a7a7a7 1px solid

ci-dessus Le point clé des deux méthodes est pour en choisir une comme float=left

5. Changer d'image au hasard :

#random { 
BACKGROUND: url(/rotate.php); 
}
Copier après la connexion
Cette méthode est très astucieuse.

4. À propos de l'adaptation en hauteur de div

Aujourd'hui, Xiaowei m'a demandé de l'aider à résoudre un problème pour sa page, qui est l'adaptation en hauteur de div, c'est-à-dire l'imbrication d'une gauche dans un div parent. Il y a deux div enfants à droite. Le contenu du div enfant à droite peut être étendu à l'infini et la hauteur du div parent peut être étirée à l'infini en utilisant la méthode de mise en page générale, il peut être parcouru correctement dans IE et le. hauteur du div parent dans Mozilla. Elle est fixée à environ 10 pixels et ne peut pas s'adapter à la hauteur, pas plus que height:auto. Que dois-je faire ? J'ai référencé un article sur Internet. Pour obtenir une hauteur adaptative, la couche div doit avoir un attribut float, j'ai donc commencé à expérimenter. Si float:left est utilisé, le div ira à l'extrême gauche de la page. handle. Je suis à l'extérieur. Ajoutez une autre couche de div et définissez la position. Ensuite, même si le float:left inside est déplacé, la position ne sera pas déplacée.

xhtml :

==================================== ======================

<div id="container_father"> 
<div id="container"> 
<div id="panel"> test<br /> 
test<br /> 
test<br /> 
<!-- id="panel" --> 
</div> 
<div id="sidebar"> 
<ul> 
<li class="current">预安装检查</li> 
<li>阅读 PFC 授权协议</li> 
<li>初始化数据库</li> 
<li>完成安装</li> 
</ul> 
<!-- id="sidebar" --> 
</div> 
<!-- id="container" --> 
</div> 
</div>
Copier après la connexion
CSS

=============== = ==================================

#container_father { 
margin-left: auto; 
margin-right: auto; 
padding: 0px; 
width: 750px; 
} 

#container { 
width: 750px; 
border: 1px solid #cccccc; 
padding: 8px; 
margin: 0px; 
background-color: #F1F3F5; 
float: left; 
}
Copier après la connexion

5、 深入标准 ~ The IE Doubled Float-Margin Bug(IE双倍浮动边界Bug)
什么发生故障?

一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box),并在浮动元素上使用了左边界(margin-left)来令它和容器的左边产生一段距离。看起来相当的简单,对吗?但直至它被在IE/Win中浏览为止,在浏览器中居左浮动元素的边界长度被神秘地翻了一倍!

情况应该如何?

下面的图释展示了一个简单的div(茶色的盒子)包含着一个居左浮动的div(绿色的盒子)。浮动元素有一个100px的左边界,使容器盒与它的左边缘之间产生了一个100px的间隙。到现在为止,一直都还不错。

 .floatbox { 
float: left; 
width: 150px; 
height: 150px; 
margin: 5px 0 5px 100px; 
/*This last value applies the 100px left margin */ 
}
Copier après la connexion

陈旧的IE“双倍占据”

原样的相同代码被在IE/Win中浏览时以些微不同的方式显示,下面的图释展示了IE/Win在布局上所做的。

这为什么会发生?别问这种傻问题!这就是IE,记得吗?符合标准只是理想的状况,不指望实现,这个简单的事实正验证了。

重点

这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间,在这之后的任意有着相似边界的浮动元素不会呈现双倍边界。只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样,双倍边界同样神秘地显示在居右的相同方式。

最后,修复办法!

直到现在(04年1月)这个Bug一直被认为是无法修复的,通常用来替代错误的边界的控制方法如:一个不可视浮动元素的左边距,连同一个内嵌的盒子一起,可视的盒子装在不可视浮动元素里;或者使用技巧仅对IE/Win设定边界的1/2值。这办法生效了,但是是混乱的而且搞糟了干净的源代码。不过现在全部结束了。

Steve Clason发现了一个修复办法,描述在他的Guest Demo里,修复了双倍边界和围绕文字缩进Bug。这是一个经典的IE的Bug修复办法,使用一个属性来修复影响不相关属性的Bug。

现在如何来做?

研究它,简单地将{display: inline;}设置给浮动元素就是全部所需做的!是的,听起来太简单了,不是吗?不过这是真的,仅仅一个display的"inline"声明已经能够胜任了。

熟悉规则的人知道浮动元素自动设置为"block"元素,而不管他们之前是什么。就如Steve从W3C里指出:

9.5.1 Positioning the float: the &#39;float&#39; property 

"This property specifies whether a box should float to the left, right, or not at all. It may be set for 
elements that generate boxes that are not absolutely positioned. The values of this property have the following
 meanings: 

left 
The element generates a block box that is floated to the left. Content flows on the right side of the box, 
starting at the top (subject to the &#39;clear&#39; property). The &#39;display&#39; is ignored, unless it has the 
value &#39;none&#39;. 

right 
Same as &#39;left&#39;, but content flows on the left side of the box, starting at the top. 

none 
The box is not floated. "
Copier après la connexion

这说明浮动元素上的{display: inline;}会被忽略,事实上所有的浏览器没有呈现任何改变,包括IE。但是,它不知何故让IE停止将浮动元素的边界翻倍。因而,这个修复办法可以被直接应用,而没有任何繁琐的隐藏方法。如果将来的一款浏览器决定对这个修复办法抱恙,只要把这个修复装入IE独用的Tan Hack里,细节如同IE Three Pixel Text-Jog Demo。

下面是两个使用了前面相同代码的生动演示,第一个照常显示了IE的Bug,下一个对浮动元素使用了"inline"修复。

.floatbox { 
float: left; 
width: 150px; 
height: 150px; 
margin: 5px 0 5px 100px; 
display: inline; 
}
Copier après la connexion

以上就是IE和FIREFOX下CSS的区别与解决方法第1/2页_经验交流的内容,更多相关内容请关注PHP中文网(www.php.cn)!


Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment afficher correctement le 'Jingnan Mai Round Body' installé localement sur la page Web? Comment afficher correctement le 'Jingnan Mai Round Body' installé localement sur la page Web? Apr 05, 2025 pm 10:33 PM

En utilisant récemment des fichiers de police installés localement dans les pages Web, j'ai téléchargé une police gratuite à partir d'Internet et je l'ai installée avec succès dans mon système. Maintenant...

Comment sélectionner un élément enfant avec l'élément de nom de première classe via CSS? Comment sélectionner un élément enfant avec l'élément de nom de première classe via CSS? Apr 05, 2025 pm 11:24 PM

Lorsque le nombre d'éléments n'est pas fixé, comment sélectionner le premier élément enfant du nom de classe spécifié via CSS. Lors du traitement de la structure HTML, vous rencontrez souvent différents éléments ...

La production de pages H5 nécessite-t-elle une maintenance continue? La production de pages H5 nécessite-t-elle une maintenance continue? Apr 05, 2025 pm 11:27 PM

La page H5 doit être maintenue en continu, en raison de facteurs tels que les vulnérabilités du code, la compatibilité des navigateurs, l'optimisation des performances, les mises à jour de sécurité et les améliorations de l'expérience utilisateur. Des méthodes de maintenance efficaces comprennent l'établissement d'un système de test complet, à l'aide d'outils de contrôle de version, de surveiller régulièrement les performances de la page, de collecter les commentaires des utilisateurs et de formuler des plans de maintenance.

Comment faire une barre de progression avec H5 Comment faire une barre de progression avec H5 Apr 06, 2025 pm 12:09 PM

Créez une barre de progression à l'aide de HTML5 ou CSS: créez un conteneur de barre de progression. Définissez la largeur de la barre de progression. Créez des éléments internes de la barre de progrès. Définit la largeur des éléments internes de la barre de progression. Utilisez la bibliothèque JavaScript, CSS ou Progress Bar pour afficher les progrès.

Comment compatible avec l'omission de débordement multi-lignes sur le terminal mobile? Comment compatible avec l'omission de débordement multi-lignes sur le terminal mobile? Apr 05, 2025 pm 10:36 PM

Problèmes de compatibilité du débordement multi-rangs sur le terminal mobile omis sur différents appareils Lors du développement d'applications mobiles à l'aide de Vue 2.0, vous rencontrez souvent la nécessité de déborder de texte ...

Quels scénarios d'application conviennent à la production de pages H5 Quels scénarios d'application conviennent à la production de pages H5 Apr 05, 2025 pm 11:36 PM

H5 (HTML5) convient aux applications légères, telles que les pages de campagne de marketing, les pages d'affichage des produits et les micro-Websites de promotion d'entreprise. Ses avantages résident dans la plateformité multi-plateaux et une riche interactivité, mais ses limites résident dans des interactions et des animations complexes, un accès aux ressources locales et des capacités hors ligne.

Comment utiliser l'attribut de forme-extérieur de CSS pour réaliser l'effet d'affichage du raccourcissement progressivement du texte? Comment utiliser l'attribut de forme-extérieur de CSS pour réaliser l'effet d'affichage du raccourcissement progressivement du texte? Apr 05, 2025 pm 10:54 PM

Implémentation de l'effet d'affichage du raccourcissement progressivement du texte dans la conception Web, comment réaliser un effet d'affichage de texte spécial pour faire raccourcir progressivement la longueur du texte? Cet effet ...

La production de pages H5 est-elle un développement frontal? La production de pages H5 est-elle un développement frontal? Apr 05, 2025 pm 11:42 PM

Oui, la production de pages H5 est une méthode de mise en œuvre importante pour le développement frontal, impliquant des technologies de base telles que HTML, CSS et JavaScript. Les développeurs construisent des pages H5 dynamiques et puissantes en combinant intelligemment ces technologies, telles que l'utilisation du & lt; Canvas & gt; Tag pour dessiner des graphiques ou utiliser JavaScript pour contrôler le comportement d'interaction.

See all articles