那些年我们一起处理的浏览器兼容_html/css_WEB-ITnose
二年前,走出校门进了公司大门,成了前端工程师,有木有很拉风,听着是不是高大上…… 前台代码简单!!!!!!!!!!!门槛低!!!!!!!!!!!!! 出入高档写字楼!!!!!!!!薪水高!!!
都不想表达自己的小心脏悲伤了多久……
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;
}

Outils d'IA chauds

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

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

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

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

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

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

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

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é.

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 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.

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é.

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.
