那些年我们一起处理的浏览器兼容_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)

Sujets chauds

Le cache de mise à jour de la page Web du compte officiel, cette chose est simple et simple, et elle est suffisamment compliquée pour en boire un pot. Vous avez travaillé dur pour mettre à jour l'article officiel du compte, mais l'utilisateur a toujours ouvert l'ancienne version. Dans cet article, jetons un coup d'œil aux rebondissements derrière cela et comment résoudre ce problème gracieusement. Après l'avoir lu, vous pouvez facilement faire face à divers problèmes de mise en cache, permettant à vos utilisateurs de toujours ressentir le contenu le plus frais. Parlons d'abord des bases. Pour le dire franchement, afin d'améliorer la vitesse d'accès, le navigateur ou le serveur stocke des ressources statiques (telles que des images, CSS, JS) ou du contenu de la page. La prochaine fois que vous y accédez, vous pouvez le récupérer directement à partir du cache sans avoir à le télécharger à nouveau, et il est naturellement rapide. Mais cette chose est aussi une épée à double tranchant. La nouvelle version est en ligne,

L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.

L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.

Cet article démontre un ajout de bordure PNG efficace aux pages Web à l'aide de CSS. Il soutient que CSS offre des performances supérieures par rapport à JavaScript ou à des bibliothèques, détaillant comment ajuster la largeur, le style et la couleur des bordures pour un effet subtil ou proéminent

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

Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit

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
