집 >웹 프론트엔드 >CSS 튜토리얼 >HTML 및 CSS의 일반적인 브라우저 호환성 문제

HTML 및 CSS의 일반적인 브라우저 호환성 문제

小云云원래의: 2017-11-16 17:01:163597검색

우리는 HTML 개발에 반드시 CSS를 사용할 것이지만 때로는 개발이 생각만큼 원활하지 않을 때가 있습니다. 예를 들어 html과 css의 일반적인 브라우저 호환성 문제인 경우 이 브라우저 호환성 문제를 해결하는 방법을 이 섹션에서 알려드리겠습니다.

1. 중앙 정렬 문제

IE에서는 기본적으로 div의 콘텐츠가 중앙에 정렬되지만 FF는 기본적으로 왼쪽 정렬됩니다.

margin: 0 auto;

2 높이 문제

두 개의 div가 위에 정렬됩니다. 기타 또는 중첩, 위 div의 높이를 설정합니다. div의 실제 콘텐츠가 설정된 높이보다 크면 FF에서는 두 div가 겹치지만 IE에서는 아래쪽 div가 위쪽 div를 위한 공간을 자동으로 만듭니다. 따라서 레이어가 겹치는 것을 방지하려면 높이를 적절하게 제어해야 합니다. 아니면 높이를 쓰지 않고 자동으로 조정되도록 해야 합니다. 그러나 이 div의 모든 첫 번째 수준 요소가 부동 상태인 경우에는 다음이 필요합니다. to div 블록 끝에 닫고 닫기 전에 바닥이 움푹 들어간 빈 div를 추가합니다. 해당 CSS는 다음과 같습니다.

float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

3.clear:both

float의 영향을 받지 않으려면; , div에 둘 다
라고 적으세요.

4. IE 부동 여백으로 인한 이중 거리

01#box {
 float:left;
width:100px;
 margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}

5. 패딩 문제

FF 패딩을 설정한 후 div는 높이와 너비를 늘리지 않지만( * 표준 XHTML1.0 정의 dtd는 일관성이 있는 것 같습니다. 높이 제어가 적절하거나 높이:100%를 사용하여 너비를 줄이십시오. 그러나 실제 경험에 따르면 일반적으로 패딩 사이에 큰 차이가 없습니다. FF 및 IE의 경우 div의 실제 너비 = 너비 + 패딩이므로 div의 전체 너비가 기록되며 패딩, 너비는 실제 원하는 너비에서 패딩을 뺀 값으로 정의됩니다.

6. div가 중첩될 때 y축 패딩 및 마린 문제

FF의 y축 하위 div에서 상위 div까지의 거리는 상위 패딩 + 하위 마린입니다

In IE, y축의 자식 div에서 부모 div까지의 거리 거리가 부모 패딩과 자식 marign 중 더 큽니다

FF에서 y축의 부모 패딩=0이고 테두리=0일 때, 자식 div에서 부모 div까지의 거리는 0이고 자식 marign은 부모 div 외부에서 작동합니다

7. 패딩, 여백, 높이, 너비에 대한 어리석은 솔루션

메서드가 아니라 기술입니다.

표준 헤더를 잘 작성하세요

<!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. List 클래스

1. FF에서는 ul 태그에 기본적으로 padding 값이 있지만 IE에서는 margin에만 값이 있습니다

먼저 ul {margin:0;padding: 0;}

2. ul 및 ol 목록의 들여쓰기 문제. ul, ol 및 기타 목록의 들여쓰기를 제거할 때 스타일을 다음과 같이 작성해야 합니다.

9. 디스플레이 클래스(디스플레이: 블록, 인라인)

1. 디스플레이: 블록, 인라인 두 요소

디스플레이: 블록; //인라인 요소를 블록 요소로 시뮬레이션할 수 있습니다. 같은 행에 배열되는 효과 달성

display:table; //FF의 경우 테이블 효과 시뮬레이션

display:block 블록 요소, 요소 특징은 다음과 같습니다.

항상 새 줄 높이에서 시작합니다. 줄 높이, 위쪽 및 아래쪽 여백은 모두 제어할 수 있습니다. 너비가 설정되지 않는 한 너비는 기본적으로 컨테이너의 100%입니다.

dc6dce4a544fdca2df29d5ac0ea9906b , e388a4556c0f65e1904146cc1a846bee, ff9c23ada1bcecdd1a0fb5d5a0f18437 ff6d136ddc5fdfeffaf53ff6ee95f185 및 25edfb22a4f469ecb59f1190150159c6는 블록 요소의 예입니다.

요소를 인라인 요소로 표시하는 것은 다음과 같습니다. 요소는 모두 한 줄에 있습니다. 높이와 위쪽 및 아래쪽 여백은 변경할 수 없습니다. 너비는 텍스트나 이미지의 너비이므로 변경할 수 없습니다. , , , , , 및 은 인라인 요소의 예입니다

2. 모두 표준 쓰기 커서 사용: 포인터;

10. 배경, 그림 범주

1. 배경 표시 문제

모든 너비 및 높이 속성에 주의하세요

2. 배경 투명도 문제

IE: 필터: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);

IE: 필터: alpha(opacity=10);

FF: 불투명도:0.6;

FF: -moz-opacity:0.10;

대부분 둘 다 작성하고 아래에 opacity 속성을 넣는 것이 좋습니다

11. min-height 최소 높이 구현(IE6, IE7, FF와 호환)

기능은: 컨테이너의 내용이 작을 때 레이아웃이나 UI 디자인 효과를 망치지 않도록 최소 높이를 유지할 수 있습니다. 컨테이너의 콘텐츠가 증가하면 컨테이너는 콘텐츠의 변화에 맞춰 자동으로 늘어납니다.

#mrjin {
               background:#ccc;
               min-height:100px;
               height:auto !important;
                height:100px;
               overflow:visible;
}

12. 유명한 Meyer Reset

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: "" ""; 
}

13. 브라우저 간 CSS 투명성

.transparent { 
  opacity: 0.7; 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70); 
  -moz-opacity: 0.7; 
  -khtml-opacity: 0.7;

14. 텍스트 그림자(CSS3)

.text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }

15. 고정 바닥글( 절대 위치를 기준으로 하지 않고 바닥글을 항상 페이지 하단에 고정시키세요)

box { box-shadow: 5px 5px 5px #666;  -moz-box-shadow: 5px 5px 5px #666;  -webkit-box-shadow: 5px 5px 5px #666; }

17. iframe 요소 삽입 페이지에서 상속된 HTML 및 본문 배경색/배경 이미지를 제거하는 방법

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=&#39;background:transparent&#39;>

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:&#39;微软雅黑&#39;; 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;}

虽然篇幅有点长，但是这里面的内容对我们真的很有用，大家赶紧收藏起来吧。

HTML 및 CSS의 일반적인 브라우저 호환성 문제

관련 기사