이번에는 CSS3 브라우저 호환성 문제를 알려드리겠습니다. CSS3 브라우저 호환성에 대한 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.
이 글에서는 CSS3와 페이지 레이아웃 학습의 요약 - 브라우저 호환성과 프런트엔드 성능 최적화를 다음과 같이 소개합니다.
1. 브라우저 호환성
1.1, 요약
세상에 똑같은 브라우저는 없습니다 예 , 동일한 코드가 다른 브라우저에서 실행되면 호환성 문제가 발생합니다. 브라우저마다 커널이 다릅니다. 동일한 커널이라도 버전이 다릅니다. 또한 다양한 운영 플랫폼, 다양한 화면 해상도, 다양한 비율에도 차이가 있습니다. 호환성은 주로 세 가지 측면을 고려합니다:
1), CSS 호환성
2), JavaScript 호환성
3), HTML 호환성
이 세 가지 범주는 프런트 엔드의 주요 구성 요소이기도 하며 모두 특정 호환성 문제를 가지고 있습니다. 자신과 적을 알라. 모든 전투에서 승리하려면 먼저 브라우저의 엔진인 커널을 이해하자.
우리는 수년간 IE6의 호환성에 대해 걱정하고 이를 위해 야근을 했습니다. IE6을 떠나기를 고대하고 있었는데 이제 IE8이 등장한 것 같습니다...
1.2, 브라우저 커널
Trident
Microsoft 브라우저 커널, IE6, IE7, IE8(Trident 4.0), IE9(Trident 5.0), IE10(Trident 6.0) 및 다양한 브랜드 브라우저의 커널입니다. 이러한 브라우저 중 일부의 새 버전은 "듀얼 코어" 또는 심지어 "멀티 코어"이며, 하나의 코어는 Trident이고 다른 코어가 추가됩니다.
Gecko
Firefox 커널, Netscape 6에 채택된 커널, 이후 Mozilla FireFox(Firefox 브라우저), Mozilla Firefox, Mozilla SeaMonkey, waterfox(Firefox의 64비트 오픈 소스 버전), Iceweasel, Epiphany(초기 버전) , Flock(초기 버전) 및 K-Meleon에서 사용하는 커널입니다.
Presto
이전 Opera 커널은 폐기되었습니다. 이제 Opera는 Google Chrome의 Blink 커널로 전환되었습니다.
Webkit
Safari 커널, Chrome 커널 프로토타입, 오픈 소스, Apple 자체 커널이자 Apple의 Safari 브라우저에서 사용하는 커널입니다. Maxthon Browser 3, Apple Safari, (Win/Mac/iPhone/iPad), Symbian 모바일 브라우저, Android 기본 브라우저
Blink
Blink는 Google과 Opera Software, Google에서 개발한 브라우저 레이아웃 엔진입니다. 이 렌더링 엔진은 계획되어 있습니다. Chromium 프로젝트의 일부가 됩니다. 이 렌더링 엔진은 오픈 소스 엔진 WebKit의 WebCore 구성 요소의 분기이며 Chrome(28 이상 버전) 및 Opera(15 이상 버전)에서 사용할 수 있습니다.
edge
Microsoft가 새로운 IE를 위해 특별히 제작한 엔진은 빠릅니다. 현재 IE11에서는 이 코어를 사용하고 있습니다. 미래.
1.3. 브라우저 시장 점유율
브라우저 시장 점유율을 능가할 수 있다면 브라우저 호환성을 다룰 때 시장 점유율이 높은 브라우저에 더 많은 관심을 기울일 수 있고, 적절한 경우 시장 점유율을 포기할 수 있습니다. 작은 발자국.
해외:
문의주소: https://www.netmarketshare.com
2016년 12월 PC 브라우저 데이터
2016년 12월 태블릿+모바일 데이터
2016 연간 브라우저 공유 변경
국내:
문의주소: http://tongji.baidu.com/data/browser
위 그림에서 볼 수 있듯이 PC 웹 개발 시 크롬과 IE 브라우저에 집중해야 하고, 모바일 프로젝트 개발 시 크롬 브라우저와 사파리에 집중해야 합니다.
1.4, 일반 표준과 호환
1), 다양한 주류 브라우저에서 일관된 성능
2), 다양한 화면 크기에 적응 가능
3), 다양한 해상도와 색상에 적응 가능 심층
브라우저 호환성 온라인 테스트:
http://browsershots.org/
http://browsershots.org/
IE 테스트 설치 가능: IETester는 로컬에서 테스트합니다.
1.5, CSS Reset
모든 브라우저에는 기본 스타일 시트 세트, 즉 사용자 에이전트 스타일 시트가 있습니다. 지정된 스타일이 없으면 웹 페이지는 브라우저에 내장된 스타일에 따라 렌더링됩니다. 스타일 시트. 이는 또한 단어에 예약된 스타일이 있어 레이아웃을 더욱 아름답고 깔끔하게 만들 수 있습니다. 기본 스타일은 브라우저마다 다르며 동일한 브라우저의 버전도 다릅니다. 그러나 여기에는 많은 호환성 문제가 있습니다. CSSReset은 모든 브라우저의 기본 스타일을 동일하게 설정할 수 있습니다.
예를 들어 전역 재설정 *{ padding: 0; margin: 0; border:} 은 전체 재설정이 가능하지만 성능이 저하되어 권장되지 않습니다. *는 전체 DOM 트리를 순회해야 하기 때문에 페이지 노드가 많으면 페이지 렌더링 성능에 영향을 미칩니다. 이 웹사이트 http://cssreset.com/에는 참고용으로 최신 CSSReset이 있습니다.
Normalize(CSS 재설정의 대안으로 주장되며 일부 내장 스타일을 유지하고 모두 지우지는 않음)
http://nicolasgallagher.com/about-normalize-css/
https://github .com/necolas/normalize.css
예: 2장
1.6, CSS Hack의 내용을 참조하세요.
CSS Hack은 다양한 브라우저 또는 다양한 브라우저 버전에 대한 특정 CSS 스타일을 작성하여 서버 탐색을 허용하는 것입니다. 호환되는 프로세스.
1.6.1.조건부 주석 방식
IE 조건부 주석(조건부 주석)은 IE 브라우저의 비공개 코드이며 다른 브라우저에서는 주석으로 간주됩니다.
gt: 초과, 조건부 버전 제외, 조건부 버전 위의 버전 선택>
lt: 미만, 조건부 버전 제외, 조건부 버전 아래의 버전 선택
gte: 크거나 같음, 선택 조건부 버전 위 버전, 조건부 포함>=
lte: 작거나 같음, 조건부 버전 선택 조건부 버전 포함 다음 버전
!: 높음 상관없이 조건부 버전을 제외한 모든 버전 선택 또는 낮음
*IE 브라우저만 조건부 주석을 인식하며 다른 브라우저는 건너뜁니다.
예:
nbsp;html>
<meta>
<title></title>
<!--[if gt IE 6]>
<style>
body{
background:lightblue;
}
</style>
<![endif]-->
<!--[if lt IE 8]>
<script type="text/javascript">
alert("您的浏览器Out了，请下载更新。");
</script>
<![endif]-->
<!--[if gt IE 6]>
<h2 id="大于IE-版本的浏览器">大于IE6版本的浏览器</h2>
<![endif]-->
효과:
IE8
chrome
ie6
1.6.2. 스타일 내 속성 태그 법칙
속성 이름 앞이나 CSS 스타일 값 뒤에 특수 문자를 추가하면 다양한 브라우저에서 이를 구문 분석할 수 있습니다.
http://browserhacks.com/ 온라인 쿼리, 다양한 대상 호환성 방법을 제공하는 강력한 웹사이트로 매우 실용적입니다.
“-″下划线是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack
这里以IE6双边距问题为例。
代码：
nbsp;html>
<meta>
<title></title>
<style>
#p1{
width: 100px;
height: 100px;
background: lightgreen;
float: left;
margin-left: 100px;
_margin-left: 50px;
}
</style>
<p></p>
效果：
1.6.3、选择器前缀法
*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
《hack速查表》：
nbsp;html>
<meta>
<title>hack速查表</title>
<style>
/*reset*/
* {
margin: 0;
padding: 0;
}
body {
font: normal 12px/2 Tahoma, Arial, "\5b8b\4f53", Helvetica, sans-serif;
height: 100%;
text-align: center;
background: #fff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
/* Tables still need 'cellspacing="0"' in the markup. */
table {
border-collapse: collapse;
border-spacing: 0;
}
ul,
ol {
list-style: none;
}
em {
font-style: normal;
color: #f00;
}
h1 {
font-size: 2em;
font-weight: 700;
}
.hack {
width: 1000px;
margin: 0 auto;
text-align: left;
}
.hack table {
width: 100%;
margin: 10px 0;
}
.hack td,
.hack th {
height: 30px;
padding: 0 5px;
border: 1px solid #ccc;
}
.hack th {
color: #cc0bf6;
}
.hack th.eq,
.hack td.eq {
width: 350px;
color: #333;
}
.hack th.identifier,
.hack td.hack-data {
width: 350px;
color: #61602f;
}
.hack td.no {
color: #fff;
text-align: center;
background-color: red;
}
.hack td.yes {
color: #fff;
text-align: center;
background-color: green;
}
.hack p b {
color: green;
}
.hack p b.red {
color: red;
}
.hack h2 {
margin: 10px 0 0 0;
font-size: 1.5em;
font-weight: 700;
}
.hack-list {
margin: 10px 0;
}
.hack-list li {
margin-bottom: 5px;
zoom: 1;
}
.hack-list span {
float: left;
width: 15px;
font-family: "\5b8b\4f53";
}
.hack-list-inf {
padding: 0 0 0 15px;
}
.hack-list em {
display: inline-block;
margin: 0 5px;
}
</style>
<h1 id="hack速查表">hack速查表</h1>
<p>
</p><p>建议：以标准浏览器为准书写代码，如遇到兼容问题，尝试其他方法解决问题，在万不得已怕情况下，采用HACK解决。</p>
<p>以下是我总结的HACK书写方法:</p>
<p>浏览器：仅限IE6+，FF，safari,chrome,opera;(截止到2011.10.12非IE均为最新版本)。</p>
<p>测试环境：windows系统;</p>
<p>DOCTYPE:
nbsp;html>.</p>
| 标志符 | 示例 | IE6 | IE7 | IE8 | IE9 | FF | OP | SA | CH |
|---|---|---|---|---|---|---|---|---|---|
| * | .eq {*color:#000;} | Y | Y | N | N | N | N | N | N |
| _ | .eq {_color:#000;} | Y | N | N | N | N | N | N | N |
| + | .eq {+color:#000;} | Y | Y | N | N | N | N | N | N |
| - | .eq {-color:#000;} | Y | N | N | N | N | N | N | N |
| > | .eq {>color:#000;} | Y | Y | N | N | N | N | N | N |
| \0 | .eq {color:#000\0;} | N | N | Y | Y | N | Y | N | N |
| \9 | .eq {color:#000\9;} | Y | Y | Y | Y | N | N | N | N |
| \9\0 | .eq {color:#000\0;} | N | N | N\Y | Y | N | N | N | N |
| :root .xx{xxx:xxx\9;} | :root .eq {color:#a00\9;} | N | N | N | Y | N | N | N | N |
| *+ | .eq {*+color:#000;} | Y | Y | N | N | N | N | N | N |
| *- | .eq {*-color:#000;} | Y | N | N | N | N | N | N | N |
| *html | *html .eq {color:#000;} | Y | N | N | N | N | N | N | N |
| *+html | *+html .eq {color:#000;} | N | Y | N | N | N | N | N | N |
| html* | html* .eq {color:#000;} | Y | Y | N | N | N | N | N | N |
| [; | .eq {color:red;[;color:blue;} | Y | Y | N | N | N | N | Y | Y |
| html>body | html>body .eq {color:blue;} | N | Y | Y | Y | Y | Y | Y | Y |
| html>/**/body | html>/**/body .eq {color:blue;} | N | N | Y | Y | Y | Y | Y | Y |
| html/**/>body | html/**/>body .eq {color:blue;} | N | Y | Y | Y | Y | Y | Y | Y |
| @media all and (min-width:0px){} | @media all and (min-width:0px){.eq {color:#000;}} | N | N | N | Y | Y | Y | Y | Y |
| *:first-child+html | *:first-child+html .eq {color:blue;} | N | Y | N | N | N | N | N | N |
| *:first-child+html{} *html | *:first-child+html{} *html .eq {color:blue;} | Y | N | N | N | N | N | N | N |
| @-moz-document url-prefix(){} | @-moz-document url-prefix(){ .eq {color:blue;}} | N | N | N | N | Y | N | N | N |
| @media screen and (-webkit-min-device-pixel-ratio:0){} | @media screen and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}} | N | N | N | N | N | N | Y | Y |
| @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){} | @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}} | N | N | N | N | N | Y | N | N |
| body:nth-of-type(1) | body:nth-of-type(1) .eq {color:blue;} | N | N | N | Y | Y | Y | Y | Y |
| 标志符 | 示例 | IE6 | IE7 | IE8 | IE9 | FF | OP | SA | CH |
FF:firefox; OP:opera; SA:safari; CH:chrome; Y代表支持，N代表不支持。
注意事项：
-
·
由于各浏览器更新神速，所以有些HACK可能会有变化，所以请大家注意。
-
·
[;此种方式会影响后续样式，不可取。
-
·
\9\0并非对所有属性都能区分IE8和IE9.比如：background-color可以，但background不可以，还有border也不可以。所以在实际用时要测试下。
-
·
当同时出现\0;*;_;时，推荐将\0写在*和_前面。例如:color:red\0;*color:blue;_color:green;可行，否则IE7和IE6里的效果会失效。但border例外，放在前后都可以。保险起见，还是放在前面。
推荐写法：
demo:
.eq {
color:#f00;/*标准浏览器*/
color:#f30\0;/*IE8,IE9,opera*/
*color:#c00;/*IE7及IE6*/
_color:#600;/*IE6专属*/
}
:root .eq {color:#a00\9;}/*IE9专属*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){.eq {color:#450;}}/*opera专属*/
@media screen and (-webkit-min-device-pixel-ratio:0){.eq {color:#879;}}/*webkit专属*/
@-moz-document url-prefix(){ .eq {color:#4dd;}}/*firefox专属*/
示例：
nbsp;html>
<meta>
<title></title>
<style>
@media screen\0 {
body {
background: lightblue;
}
}
</style>
运行结果：
1.7、文档模式 （X-UA-Compatible）
文档模式是IE8浏览器以后的一种独有技术，他可以通过meta指定当前文档的渲染模式，如可以把IE8降级成IE6、IE7使用。文档模式的主要作用是影响浏览器显示网页HTML的方式，用于指定IE的页面排版引擎（Trident）以哪个版本的方式来解析并渲染网页代码。
<meta> <meta> <meta> <meta>//最新IE
“X-UA-Compatible”的值有两种方式：Emulate+IE版本号，单纯版本号
EmulateIE8：如果声明了文档类型，则以IE8标准模式渲染页面，否则将文档模式设置为IE5
9：强制以IE9标准模式渲染页面，忽略文档类型声明
x-ua-compatible 头标签大小写不敏感，必须用在 head 中，必须在除 title 外的其他 meta 之前使用。
<meta> <meta>
Google Chrome Frame(谷歌内嵌浏览器框架GCF)
插件可以让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核
未指定文档模式时使用默认的文档模式示例：
nbsp;html>
<meta>
<title>X-UA-Compatible</title>
<style>
#p1 {
width: 100px;
height: 100px;
background: lightgreen;
float: left;
margin-left: 100px;
_margin-left: 50px;
}
</style>
<p></p>
运行结果：
强制指定文档模式为IE6，在IE8下会自动变成怪异模式，简单说IE8被当作IE6在用。
多数情况下我们不会这样降级使用，一般会将IE选择为最新版本的文档模式（注意不是文档类型），如果IE浏览器使用了GCF技术我们应该强制使用最新版内核，写入如下：
现在多数网站这是这种写法如baidu。
1.8、javascript兼容
这里有两层意思，第一可以使用javascript操作样式与标签，强制浏览器兼容，比如先使用javascript判断浏览器类型，再操作样式与标签。
第二指javascript存在兼容问题，如一个对象在某些浏览器下没有办法使用，要让javascript更加兼容，可以采取如下办法：
1、使用第三方提代的javascript库，如jQuery，Zepto， Prototype，dojo、YUI、ExtJS
像jQuery这种成熟的javascript库经过多次的版本迭代，已经变得非常成熟，世界上的网站到现在近60%都使用到了jQuery，他的兼容性不错。
2、浏览器检测、重新封装
使用javascript判断浏览器类型，对一些特点的方法或对象重新封装后使用屏蔽浏览的不兼容性。可以使用User-Agent、或特定对象。
示例：
nbsp;html>
<meta>
<title></title>
<h2></h2>
<script>
//用于检测浏览器是否为IE
var isIE=function(){
return !!window.ActiveXObject;
}
function show(info){
document.getElementById("msg").innerHTML+=info+"<br/>"
}
//获得用户代理对象，浏览器与操作系统信息
show(navigator.userAgent);
show(isIE()?"是IE浏览器":"不是IE浏览器");
</script>
效果：
在user-agent中包含有不少的客户端信息，可以解析出判断浏览器部分的内容。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
위 내용은 CSS3 브라우저 호환성 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
@keyframes 및 @Media와 같이 @Rules는 얼마나 많은 특이성을 가지고 있습니까?Apr 18, 2025 am 11:34 AM나는 다른 날이 질문을 받았다. 나의 첫 번째 생각은 : 이상한 질문입니다! 특이성은 선택기에 관한 것이며 At-Rules는 선택기가 아니므로 ... 무의미합니까?
@Media 및 @Support 쿼리를 중첩 할 수 있습니까?Apr 18, 2025 am 11:32 AM그렇습니다. 당신은 할 수 있습니다. 그리고 그것은 실제로 어떤 순서로 중요하지 않습니다. CSS 전 처리기가 필요하지 않습니다. 일반 CSS에서 작동합니다.
빠른 Gulp 캐시 파열Apr 18, 2025 am 11:23 AMCSS 및 JavaScript (및 이미지 및 글꼴 등)와 같은 자산에 멀리 떨어진 캐시 헤더를 설정해야합니다. 브라우저를 알려줍니다
CSS의 품질과 복잡성을 모니터링하는 스택을 찾아Apr 18, 2025 am 11:22 AM많은 개발자들은 CSS 코드베이스를 유지하는 방법에 대해 글을 썼지 만 코드베이스의 품질을 어떻게 측정하는지에 대해 많은 글을 쓰지 않습니다. 물론, 우리는 가지고 있습니다
Datalist는 가치를 시행하지 않고 값을 제안하는 것입니다Apr 18, 2025 am 11:08 AM짧고 임의의 텍스트를 수락 해야하는 양식이 있습니까? 이름이나 다른 것 같습니다. 정확히 무엇을위한 것입니다. 많은 것이 있습니다
취리히에서 열린 전면 회의Apr 18, 2025 am 11:03 AM나는 프론트 컨퍼런스를 위해 스위스 취리히로 향하게되어 매우 기쁩니다 (그 이름과 URL을 사랑합니다!). 나는 전에 스위스에 가본 적이 없기 때문에 나는 흥분했다
CloudFlare Workers와 함께 풀 스택 서버리스 애플리케이션 구축Apr 18, 2025 am 10:58 AM소프트웨어 개발에서 제가 가장 좋아하는 개발 중 하나는 서버리스의 출현이었습니다. 세부 사항에 푹 빠지는 경향이있는 개발자로서
NUXT 응용 프로그램에서 동적 경로 생성Apr 18, 2025 am 10:53 AM이 게시물에서는 들어오는 데이터를 위해 동적 경로를 만드는 방법을 보여주기 위해 NetLify에 구축하고 배포 한 전자 상거래 상점 데모를 사용합니다. 상당히입니다
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.
드림위버 CS6
시각적 웹 개발 도구
WebStorm Mac 버전
유용한 JavaScript 개발 도구
ZendStudio 13.5.1 맥
강력한 PHP 통합 개발 환경
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
