웹 프론트엔드 HTML 튜토리얼 主流浏览器css兼容问题的总结_html/css_WEB-ITnose

主流浏览器css兼容问题的总结_html/css_WEB-ITnose

Jun 24, 2016 am 11:24 AM

最近又搞了一波网站的兼容,由于要求ie浏览器还是要兼容到ie8,所以调起来还是各种蛋疼。

现在就post一些做兼容的总结,可能不够全面,但是可以告诉大家如何避过一些坑。主要测试了chrome,firefox,ie8、9、11,360浏览器。

 

一、基本的css兼容:

1、可能很多人喜欢用css hack的形式去兼容ie浏览器,但是我自己用起来感觉其实不好使 。ie7-就不考虑了,问题在哪呢,就在ie8的甑别上,你怎么让样式只对ie8起作用。上网搜你可能会得到这样的答案:

.selector {  color: #ff0\0;/*ie8*/  color: #f00\9\0;/*ie9+*/}
로그인 후 복사

但是实际上你一试就嗝屁了,因为ie8他就是识别ie9能识别的,所以根本不能让独立的样式只对ie8起作用。

更好用的是什么呢,是用ie浏览器独有的文档注释的方式。像这样:

<!DOCTYPE html><!--[if IE 8 ]> <html class="ie8" lang="en"> <![endif]--><!--[if IE 9 ]> <html class="ie9" lang="en"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]--> 
로그인 후 복사

屡试不爽,关键是可以独立的维护处理兼容ie浏览器的样式表,又不会淹没在一大堆css hack标识中,只需要在独立对ie8应用样式规则的地方,copy该条规则,然后在前面加上 .ie8然后就能随便写了,对付ie9也一样。

2、对于360双核这种找抽浏览器,据说添加以下头部meta信息可以使得网页用webkit内核渲染:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
로그인 후 복사

IE=edge:保持使用最高级别模式显示内容;

chrome=1:谷歌的外挂插件Google Chrome Frame(谷歌内嵌浏览器框架GCF),使用IE浏览网页时实际上是使用Chrome浏览器内核渲染,最低支持IE6,但前提是客户端已经安装GCF。

但实际上这个meta标识是ie浏览器所识别的(详情:ies-compatibility-features-for-site-developers/),并不是公认的标准,所以用双核的浏览器会傲娇。当然360也会傲娇,所以有时你会发现360并不能总是(也可能是我本人rp差)以chrome内核渲染你的按现代标准开发的网页。

那么试试这个吧,添加:

这个meta标识是360自家实现的(详情:meta.html),表示强制要求360这造福中国社会万千网民的浏览器用chrome的内核渲染网页。

ok,一行代码搞定360绝大部分的兼容。

二、ie8的css兼容

现在说说ie8下的css问题:

1、ie8支持:first-child,但不支持:last-child。因为前者是css2.1标准,后者是css3标准。参下:

CSS 2.1 selectors:Basic CSS selectors including: * (universal selector), > (child selector), :first-child, :link, :visited, :active, :hover, :focus, :lang(), + (adjacent sibling selector), [attr], [attr="val"], [attr~="val"], [attr|="bar"], .foo (class selector), #foo (id selector)

2、 为什么会发现上面的奇怪的东西(怪我css2.1和css3分不清),因为编译sass文件后发现ie8下的样式基本全歇菜了。需要注意的是,如果浏览器 不支持的选择器和支持的选择器写在一起,那么整条规则就不起作用了。比如你不小心创造了一个伪元素(是真的伪哦).bb:bb-child, .cc{background:#333;}那么这整条规则就不起作用了,所有浏览器在此情况下都会歇菜,.cc的样式就丢失了。

3、 input设置了左右padding,but输入较多内容时padding还是会消失。这个问题是无解的,ie浏览器她就是这么渲染input的,解决方法是在input 外面套一层div,用div设置左右padding,border,width和height,input只需要设置width和weight为100% 即可。另外,正常来讲,如果没有明确设置height的值,那么设置的line-height值就是height的值,but对于ie8,如果input 设置了 line-height,那么input必须设置height,否则input的内容显示有问题,会上下隐藏部分内容,她就是要躲猫猫。

4、 为什么上面我不用input的伪元素进行设置而要嵌套多一层div呢?因为input,img,iframe等元素不支持伪元素 -_-||。:before 和:after伪元素指定了一个元素文档树内容之前和之后的内容。与'content'属性联用,指定了插入的内容(也就是你必须显性设置content 属性这两个伪家伙才能在文档中显示出来,哪怕设置content属性为空字符串也行)。作为DOM元素,伪元素都是在容器内进行渲染的, input,img,iframe等元素都不能包含其他元素,也就是不是容器,所以不能通过伪元素插入内容。

5、 table中如果不是严格的用于表格,而是用于奇葩的局部布局时(我也想问为什么用来布局。。),td设置成inline-block可以排成一行,但是 ie8和ie9 下,如果td中的内容很长,即使td设置了宽度,td也会撑开并占用td设置的margin(废话,td是没有margin可言的),直到挤占所有的td 宽度之和为tr的宽度。但是td设置成float:left;就能表现成block。这个不清楚为什么,但是管用。。

6、父元素的左padding会和子元素的左margin重叠。这个是没有好好实现盒子模型的事情了,包容吧。。

7、sprite图中的icons之间最好留空白间隔,哪怕间隔1px也好,否则ie8下会出现使用了某一个icon当背景,icon后面跟着的其他icon也顺带显示了一小部分的bug,所以icons之间还是要适当留白,不要太省。

三、ie11部分css问题

1、ie11下很多元素表现和其他浏览器不一致,比如对应用了同一样式(不设置高度)的div,其他浏览器解析的高度是一致的,但是ie11下该div有可能高度偏大,由此导致一些排版上的问题,所以,如果发现元素排版上下偏移的问题,查看此元素或其当代元素是否设置了高度,统一添上高度一切都ok了。

2、抱歉,ie11问题确实不多。

四、结尾附上一个关于css优先级的奇谈

首先我们知道:

1、id选择器优先级权重比class选择器大一个数量级,class选择器权重比标签选择器大一个数量级;

2、class选择器和属性选择器同优先级;

3、样式的优先程度需要根据第1条规则计算整体的优先级,按选择器权重计算各条样式规则中所有选择器优先级之和,哪条规则权重大,那条就说了算。如果相同那么后面的覆盖前面的。

4、像这种.dog > p开挂,多了特殊符号的,并不会增加优势,还是和 .dog p优先级一样。

然后可以抛出一个问题了:

对于下面的文档结构,分别对 p | .p | div p | .parent | #parent设置color属性,那么优先级如何呢?

<div id="parent" class="parent"><br /> <p class="p">p</p><br /></div>
로그인 후 복사

结果很有意思:

也就是 .p > div p > p > #parent > .parent

id选择器居然比p选择器优先级还低!将p元素和div元素分开看,.p > div p > p 很正常, #parent > .parent也很正常。所以问题关键在子级p和父级#parent, 子级的选择器优先级比父级的选择器优先级高,或者说继承的优先级程度比自身的优先级低!

嵌套多一层看看就知道是不是了,分别对#parent | div | p设置color属性:

<div id="parent" class="parent">  <div class="mid">    <p id="p" class="p">p</p>   <div></div>
로그인 후 복사

 

结果确实是p > div > #parent:

 

即使应用两个选择器也无济于事,依然是p >#parent div

 

但是只要能定位到p元素,那么父级选择器的权重就起作用了,一试便知,对#parent p | #p 设置同样的样式结果是这样的:

嗯,确实如此。所以:

5、css样式优先级还和继承有关,继承的优先级不如本身应用的优先级高。

 

总结完毕,敬礼。

 

-------------------------------本文地址: 

 

 

 

 

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? 공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지 업데이트 캐시, 이것은 간단하고 간단하며 냄비를 마시기에 충분히 복잡합니다. 공식 계정 기사를 업데이트하기 위해 열심히 노력했지만 사용자는 여전히 기존 버전을 열었습니까? 이 기사에서는이 뒤에있는 비틀기와 회전을 살펴 보고이 문제를 우아하게 해결하는 방법을 살펴 보겠습니다. 읽은 후에는 다양한 캐싱 문제를 쉽게 처리 할 수있어 사용자가 항상 가장 신선한 콘텐츠를 경험할 수 있습니다. 기본 사항에 대해 먼저 이야기 해 봅시다. 액세스 속도를 향상시키기 위해 브라우저 또는 서버는 일부 정적 리소스 (예 : 그림, CSS, JS) 또는 페이지 컨텐츠를 저장합니다. 다음에 액세스 할 때 다시 다운로드하지 않고도 캐시에서 직접 검색 할 수 있으며 자연스럽게 빠릅니다. 그러나 이것은 또한 양날의 검입니다. 새 버전은 온라인입니다.

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? 웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? Mar 04, 2025 pm 02:39 PM

이 기사는 CSS를 사용한 웹 페이지에 효율적인 PNG 테두리 추가를 보여줍니다. CSS는 JavaScript 또는 라이브러리에 비해 우수한 성능을 제공하며, 미묘하거나 눈에 띄는 효과를 위해 테두리 너비, 스타일 및 색상 조정 방법을 자세히 설명합니다.

& lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

& lt; Progress & Gt의 목적은 무엇입니까? 요소? & lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? Mar 12, 2025 pm 04:05 PM

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

& lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

See all articles