Maison >interface Web >tutoriel CSS >Problèmes courants de compatibilité des navigateurs en HTML et CSS
Problèmes courants de compatibilité des navigateurs en HTML et CSS
- 小云云original
- 2017-11-16 17:01:163541parcourir
Nous utiliserons certainement le CSS dans le développement HTML, mais parfois le développement n'est pas aussi fluide que nous le pensions. Par exemple, des problèmes courants de compatibilité des navigateurs en HTML et CSS, puis pour cette compatibilité de navigateur Dans cette section, nous allons vous apprendre comment. pour résoudre le problème.
1. Problème de centrage
Le contenu du div est centré par IE par défaut et aligné à gauche par FF par défaut. Vous pouvez essayer d'ajouter du code :
margin: 0 auto;
2. Problème de hauteur
Pour deux divs disposés l'un au-dessus de l'autre ou imbriqués, la hauteur du div ci-dessus est définie. Si le contenu réel du div est supérieur à la hauteur définie, la hauteur du div situé au-dessus est définie. deux divs se chevaucheront dans FF ; mais dans IE, le div inférieur fera automatiquement de la place pour le div supérieur, donc afin d'éviter le chevauchement des couches, la hauteur doit être contrôlée de manière appropriée, ou vous pouvez simplement ne pas écrire la hauteur et la laisser. ajuster automatiquement. Une meilleure méthode est height: 100%; mais lorsque les éléments de premier niveau de ce div sont tous flottants, vous devez ajouter un div vide enfoncé à la fin du bloc div et avant la fermeture. :
float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;} 3. clear:both;
Si vous ne voulez pas être affecté par float, écrivez simplement clear:both;
4. Double distance générée par la marge flottante d'IE
01#box {
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}5. Problème de remplissage
Une fois que FF a défini le remplissage, le div augmentera la hauteur et la largeur, mais IE ne le fera pas (* la norme XHTML1.0 définit dtd Cela semble être cohérent) Le contrôle de la hauteur est approprié, ou essayez d'utiliser height:100%; la largeur est réduite et le remplissage est utilisé. Mais selon l'expérience réelle, il n'y en aura généralement pas. Il y a une grande différence entre le remplissage de FF et IE. La largeur réelle du div = largeur + rembourrage, donc le div est écrit Pleine largeur et rembourrage, la largeur est définie par la largeur réelle souhaitée moins le rembourrage.
6. Problèmes de remplissage et de marquage sur l'axe y lorsque les divs sont imbriqués
La distance entre le div enfant et le div parent sur l'axe y dans FF est le remplissage parent + la marge enfant
Dans IE, la distance entre le div enfant et le div parent sur l'axe y est la plus grande entre le remplissage parent et la marge enfant
Dans. FF, lorsque le padding parent = 0 et border = 0 sur l'axe y, le div enfant La distance jusqu'au div parent est de 0, et la marge enfant est appliquée à l'extérieur du div parent
7 . Solutions stupides pour le remplissage, la marge, la hauteur, la largeur
Notez qu'il s'agit d'une compétence, pas d'une méthode :
Écrivez l'en-tête standard
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=” 高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div宽尽量用margin，慎用padding，width算准实际要的减去padding
. 8. Classe de liste
1. La balise ul a une valeur de remplissage par défaut dans FF, seule la marge a une valeur
Définissez d'abord ul {margin:0;padding:. 0;}
2. Éliminez l'indentation des listes ul, ol et autres lors de la saisie, le style doit être écrit comme : {list-style:none;margin:0px;padding:0px;}
10. Catégories d'arrière-plan et d'image
Problème d'affichage de l'arrière-plan
. Faites attention à compléter les attributs de largeur et de hauteur
IE : filtre : alpha(opacity=10); FF : opacité :0,6 ; FF : -moz-opacity :0,10 ; Les deux meilleurs Écrivez-les tous et mettez l'attribut opacity ci-dessous
11. Implémentation de la hauteur minimale min-height (compatible avec IE6, IE7, FF)
La fonction est : Lorsque Lorsque le contenu du conteneur est petit, une hauteur minimale peut être maintenue pour éviter d'endommager la mise en page ou l'effet de conception de l'interface utilisateur. Lorsque le contenu du conteneur augmente, le conteneur peut automatiquement s'étirer pour s'adapter aux changements de contenu.
12. La célèbre réinitialisation Meyer
#mrjin {
background:#ccc;
min-height:100px;
height:auto !important;
height:100px;
overflow:visible;
}13. Transparence CSS multi-navigateurs html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6，p, blockquote, pre,a, abbr,
acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike,
strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}14. (CSS3) .transparent {
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;.text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }16. Pied de page collant (laissez le pied de page toujours ancré en bas de la page, au lieu de basé sur la position absolue) box { box-shadow: 5px 5px 5px #666; -moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666; }
iframe元素的功能是在一个文档里内嵌一个文档，创建一个浮动的帧。内嵌文档时一个完整的页面，有HTML,BODY等属性。这样遇到了一个问题，如果样式表中对BODY定义过背景色/背景图片，那么内嵌文档将全部继承过来。所以如何去掉背景色和背景图片：
【1】去掉背景色：filter:Chroma(Color=white);
举例：
<iframe width="100%" height="400" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" leftmargin="0" topmargin="0" style="filter:Chroma(Color=white);" ></iframe>
【2】去掉背景图片：
举例：
<iframe width="100%" height="400" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" leftmargin="0" topmargin="0" style="filter:Chroma(Color=white);" allowTransparency="true" ></iframe>
注意：内嵌页面同时也要增加BODY属性：
<body bgcolor="transparent" style='background:transparent'>
18、为什么web标准中无法设置IE浏览器滚动条颜色了？
原来样式设置：
body{2scrollbar-face-color:#f6f6f6; 3scrollbar-highlight-color:#fff;
4scrollbar-shadow-color:#eeeeee; 5scrollbar-3dlight-color:#eeeeee;
6scrollbar-arrow-color:#000; 7scrollbar-track-color:#fff; 8scrollbar-darkshadow-color:#fff; }解决办法是将body换成html。
19、为什么中火狐浏览器下文本无法撑开容器的高度？
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义：
div { height:auto!important; height:200px; min-height:200px; }20、如何定义1px左右高度的容器？
IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px
21、怎么样才能让层显示在FLASH之上呢？
解决的办法是给FLASH设置透明:
<a href="http://www.chinaz.com/">:</a> <pre line="1"> <param name="wmode" value="transparent" />
22、怎样使一个div层居中于浏览器中？
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}23、怎样使div背景透明？
首先，需要这两个层都是兄弟关系，其次，这两个层都需要绝对定位。举个例子：
body {
font:normal 12px/30px Verdana; }
#test {
position:relative;
width:400px;
height:50px;
}
#inner {
z-index:2;
position:absolute;
top:10px;
left:10px;
width:380px;
height:30px;
color:#003;
font-weight:bold;
text-align:center;
}
#transbox {
z-index:1;
position:absolute;
top:0px;
left:0px;
width:400px;
height:50px;
background:#eef;
border:1px solid #a00;
filter:alpha(opacity=40);
-moz-opacity:0.4;
opacity:0.4;
}e388a4556c0f65e1904146cc1a846bee这里很多的文字,这里很多的文字,这里很多的文字,这里很多的文字,94b3e26ee717c64999d7867364b1b4a3
24、怎样去掉选中时的虚线框？
利用onfocus="this.blur();"例如：dd8b186726c0b45d7b00732cf0e1fe3e测试5db79b134e9f6b82c0b36e0489ee08ed
25、ie6下png背景显示问题？
针对ie6下png背景显示问题,CSS中可以这样解决：
_background:none;_filter:progid :DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’http://www.0351zhuangxiu.com/uploads/images/bj.jpg’);
26、文字与表单对齐方法？
设置表单元素第一字体为Tahoma(Verdana系列也可),并设置vertical-align:middle.建设大家把这个约定写入CSS RESET中,能减小很多麻烦:
body,button,input,select,textarea{font:12px/1.5 tahoma,arial,sans-serif; vertical-align:middle}27、optgroup标签的用法？
optgroup标签,鲜为人知,它对提升选择表单用户体验很有帮助。就是可以在有很多选项时,对这些选项分组：例子：
<select id="selectId"> <optgroup label="GROUP ONE"> <option value="1">one select</option> <option value="2">two select</option> </optgroup> <optgroup label="GROUP TWO"> <option value="3">three select</option> <option value="4">four select</option> </optgroup> </select>
28、文字与图片垂直居中对齐方法？
为图片与文字的共同父元素所有的后代元素定义*{vertical-align:middle};例如:
<p>我要的坚强<img src="i/image.gif" /></p>
只需定义p*{vertical-align:middle}即可使文字与图片同行垂直居中.
29、文章标题列表中日期居右显示的两种方法？
方法A相对方法B省资源,但比方法B要多写两句代码,使用时请视情况而定:
方法A：
<p>这是文章标题<span>2010-10-10</span></p>
然后定义p和span的样式：
p{ position:relative}
p span{ position:absolute; right:0}方法B:
<p><span>2010-10-10</span>这是文章标题</p>
然后定义span右浮动:
p span{float:right}30、ie6下max/min-width/height实现？
ie6下max/min-width/height实现,_width: expression_r(this.width >600 ? “600px” : true);,height同理.
31、空白外边距互相叠加的问题？
一般通过添加透明边框或者1px的内边距避免；
其一,为外围元素定义透明边框.具体到本例,即在样式div中加入border:1px solid transparent;
其二,为外围元素定义内边距填充..具体到本例,即在样式div中加入padding:1px；
例如：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>空白边距叠加demo@Mr.Think</title>
<style>
body{width:300px; font-family:'微软雅黑'; font-size:1em; text-indent:10px; line-height:1.25}
div{background:#a40000;margin:10px}
div p{background:#eee;margin:15px}
</style>
</head>
<body>
<div><p>空白边距叠加demo@Mr.Think</p></div>
</body>
</html>32、网页设计中的默认字体
font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;
说明：line-height采用1.5, 也就是18px. 这是淘宝视觉规范中定义的行高，对于12px字体，这个行高看起来很舒服。font-family默认采用Tahoma. Tahoma是英文Windows操作系统的默认字体，这个字体比较均衡，显示中英文混排很不错，是经久耐看的一款字体。
33、浏览器兼容——常用的css hack
/*第一种*/
.title{ height:200px;
*height:200px;
_height:200px; }
/*第二种*/
.title{ height:200px;
*height:200px !important;
*height:200px; }
/*第三种*/
.title{ height:200px; }
*html.title{ height:200px;}
*+html.title{ height:200px;}虽然篇幅有点长，但是这里面的内容对我们真的很有用，大家赶紧收藏起来吧。
相关教程：
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!