Maison interface Web tutoriel HTML 那些年我们一起处理的浏览器兼容_html/css_WEB-ITnose

那些年我们一起处理的浏览器兼容_html/css_WEB-ITnose

Jun 24, 2016 am 11:45 AM

二年前,走出校门进了公司大门,成了前端工程师,有木有很拉风,听着是不是高大上…… 前台代码简单!!!!!!!!!!!门槛低!!!!!!!!!!!!! 出入高档写字楼!!!!!!!!薪水高!!!
都不想表达自己的小心脏悲伤了多久……
HTML,JSON,JS,CSS,JQUERY,,,,,有木有!
就单说这个兼容性问题,一大堆一大堆啊!这个要到IE6,那个要360,还有百度,猎豹等等等等一大堆浏览器有木有!要实现兼容有木有?
MD,xp系统都不更新了好不,换个浏览器能S啊,换个新版本接触一下新风格,看一下新世界,你会Over啊!
不说了,说多了都是泪,小可就把这两年的时间大大小小处理的一些兼容贴出来分享一下;

不得不说![b][size=7][color=Yellow]鄙视[/color][/size][/b]IE;

1.使用clearfix类清除浮动;在需要清除浮动的位置引入该类。

.clearfix{
    display: block;
    zoom:1;        
}
.clearfix:after,.clearfix:before{/*设定一个为空的元素,用来清除元素之间的浮动,这个只能作用于对大多数符合标准的浏览器;*/
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
* html .clearfix{height:1%;/*这是为了触发IEhaslayout*/}
.clearfix{display:block;}

2.IE6下的3像素;

有时候吧,这个IE6会莫名其妙的多出来这个几像素,这是个非常讨厌的事情,毕竟咱们精精确确算的布局到这他这里变得有点惨不忍睹!

不过使用_margin-right:-3px;就可以咯

3.IE6及更早浏览器下当li内部元素是定义了display:block的内联元素时底部产生空白

    添加:zoom:1;
    设置UL 的width

4.IE低版本PNG图片不透明解决方案;

 小 可比较懒散,所以这个PNG透明的问题还是比较喜欢使用JS来做处理的;这些JS 在网上有很多的DEMO,大家可以找找看,小可比较喜欢使用这个[url=http://www.dillerdesign.com /experiment/DD_belatedPNG/]DD_belatedPNG.js[/url]实现。
具体的引入方式是:

5.img引入图片之后会有几像素的空白间隙

    可添加 img{display:block;}

6.如何设置鼠标在所有浏览器中均显示手的形状

    .p{cursor:pointer;}

7.实现已知高宽元素垂直居中;

    #div{
        position:relative;
        width:400px;
        height:400px;
        border:1px solid #f00;
        top:50%;
        left:50%;
        margin-left:-200px;
        margin-top:-200px;
    }

8.内联元素 span 高宽设置;
    span{
        display:block;
        width:200px;
        height:35px;
    }

9.超链接保留有虚线框;
    a{
        outline:none;
    }


10.设置元素透明度之后,元素内的内容也会随之变成透明状态;
    .wraper{width:200px;height:200px;background:#f00;filter:alpha(opacity=50);opacity:.5;}
.content{width:200px;height:200px;margin-top:-200px;}




11.设置元素横向居中;
    #div{
    width:980px;
    margin:0px auto;
    }

12.文字垂直居中、首行缩进;
    #lh20{
    height:20px;
    line-height:20px;
    text-indent:1em;    
}

13.设置浮动之后IE出现双倍间距;
    #div{
        float:left;
        display:inline;
    }

 

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)
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Vous avez un jeu croisé?
1 Il y a quelques mois 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)

Quel est le but du & lt; Progress & gt; élément? Quel est le but du & lt; Progress & gt; élément? Mar 21, 2025 pm 12:34 PM

L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati

Quel est le but du & lt; datalist & gt; élément? Quel est le but du & lt; datalist & gt; élément? Mar 21, 2025 pm 12:33 PM

L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159

Quel est le but du & lt; mètre & gt; élément? Quel est le but du & lt; mètre & gt; élément? Mar 21, 2025 pm 12:35 PM

L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex

Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive? Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive? Mar 20, 2025 pm 05:56 PM

L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.

Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Mar 20, 2025 pm 06:05 PM

L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.

HTML est-il facile à apprendre pour les débutants? HTML est-il facile à apprendre pour les débutants? Apr 07, 2025 am 12:11 AM

HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.

Les rôles de HTML, CSS et JavaScript: responsabilités de base Les rôles de HTML, CSS et JavaScript: responsabilités de base Apr 08, 2025 pm 07:05 PM

HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

Quel est un exemple d'une balise de départ dans HTML? Quel est un exemple d'une balise de départ dans HTML? Apr 06, 2025 am 12:04 AM

Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.

See all articles