CSS3浏览器兼容的介绍_F11 - 专业站长和开发者的学习网站

分享到

CSS3浏览器兼容的介绍

css 来源：互联网作者：佚名发布时间：2022-10-03 17:57:24 人浏览

摘要

一、浏览器兼容 1.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内核，Netscape6开始采用的内核，后来的Mozilla FireFox(火狐浏览器) ，Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位开源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）、K-Meleon使用的内核。

Presto

Opera前内核，已废弃，Opera现已改用Google Chrome的Blink内核。

Webkit

Safari内核,Chrome内核原型,开源，它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。傲游浏览器3、Apple Safari、(Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器

Blink

Blink是一个由Google和Opera Software开发的浏览器排版引擎，Google计划将这个渲染引擎作为Chromium计划的一部分，这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）。

edge

微软专门为新IE打造的引擎，速度快，目前已经基于此引擎开发了浏览器，目前IE11使用该内核，估计以后微软的新浏览器会继续采用该内核。

1.3、浏览器市场份额（Browser Market Share）

能过浏览器的市份额我们可以在处理浏览器兼容性时会更加关注市场份额高的浏览器，适当的时候可以放弃市场份额占有量小的浏览器。

国际：

查询地址：https://www.netmarketshare.com

2016年12月PC浏览器数据

2016年12月平板+移动数据

2016年浏览器份额变化

国内：

查询地址：http://tongji.baidu.com/data/browser

从上图可以看出，我们在针对PC Web开发时需要重点关注Chrome、IE浏览器，开发Mobile项目时要重点关注Chrome浏览器与Safari。

1.4、兼容的一般标准

1)、在不同的主流的浏览器上表现效果一致

2)、能适应不同的屏幕大小

3)、能适应不同的分辨率与色彩深度

浏览器兼容在线测试：

http://browsershots.org/

IE测试可以安装：IETester在本地测试。

1.5、CSS Reset

每种浏览器都有一套默认的样式表，即user agent stylesheet，网页在没有指定的样式时，按浏览器内置的样式表来渲染。这是合理的，像word中也有一些预留样式，可以让我们的排版更美观整齐。不同浏览器甚至同一浏览器不同版本的默认样式是不同的。但这样会有很多兼容问题，CSSReset可以将所有浏览器默认样式设置成一样。

如全局重置*{ padding: 0; margin: 0; border:}虽然能全部重置，但由于性能较低，不推荐使用。因为*需要遍历整个DOM树，当页面节点较多时，会影响页面的渲染性能。这个网站http://cssreset.com/有最新的CSSReset提供给大家参考。

Normalize (号称是CSS reset的替代方案，保留了一些内置的样式，并不是清除所有)

http://nicolasgallagher.com/about-normalize-css/

https://github.com/necolas/normalize.css

示例：请看第2章的内容

1.6、CSS Hack

CSS Hack就是针对不同的浏览器或不同版本浏览器写特定的CSS样式达到让浏览器兼容的过程。

1.6.1、条件注释法

IE条件注释（Conditional comments）是IE浏览器私有的代码，在其它浏览器中被视为注释。

gt : greater than，选择条件版本以上版本，不包含条件版本 >

lt : less than，选择条件版本以下版本，不包含条件版本 <

gte : greater than or equal，选择条件版本以上版本，包含条件版本>=

lte : less than or equal，选择条件版本以下版本，包含条件版本 <=

! : 选择条件版本以外所有版本，无论高低

*只有IE浏览器认识条件注释、其它浏览器会跳过

示例：

<!DOCTYPE html>

<html>

<head>

<!--[if gt IE 6]>

<style>

body{

background:lightblue;

}

</style>

<![endif]-->

<!--[if lt IE 8]>

alert("您的浏览器Out了，请下载更新。");

</script>

<![endif]-->

</head>

<body>

<!--[if gt IE 6]>

<h2>大于IE6版本的浏览器</h2>

<![endif]-->

</body>

</html>

效果：

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双边距问题为例。

代码：

<!DOCTYPE html>

<html>

<head>

#div1{

width: 100px;

height: 100px;

background: lightgreen;

float: left;

margin-left: 100px;

_margin-left: 50px;

}

</style>

</head>

<body>

</body>

</html>

效果：

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速查表》：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

<!DOCTYPE html>

<head>

<title>hack速查表</title>

/*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>

</head>

<body>

<h1>hack速查表</h1>

<p>建议：以标准浏览器为准书写代码，如遇到兼容问题，尝试其他方法解决问题，在万不得已怕情况下，采用HACK解决。</p>

<p>以下是我总结的HACK书写方法:</p>

<p>浏览器：仅限IE6+，FF，safari,chrome,opera;(截止到2011.10.12非IE均为最新版本)。</p>

<p>测试环境：windows系统;</p>

<p>DOCTYPE:

<!doctype html>.</p>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>.eq {*color:#000;}</td>

</tr>

<tr>

<td>.eq {_color:#000;}</td>

</tr>

<tr>

<td>.eq {+color:#000;}</td>

</tr>

<tr>

<td>.eq {-color:#000;}</td>

</tr>

<tr>

<td>.eq {>color:#000;}</td>

</tr>

<tr>

<td>.eq {color:#000\0;}</td>

</tr>

<tr>

<td>.eq {color:#000\9;}</td>

</tr>

<tr>

<td>.eq {color:#000\0;}</td>

</tr>

<tr>

<td>:root .eq {color:#a00\9;}</td>

</tr>

<tr>

<td>.eq {*+color:#000;}</td>

</tr>

<tr>

<td>.eq {*-color:#000;}</td>

</tr>

<tr>

<td><span class="hack-data">*html</span> .eq {color:#000;}</td>

</tr>

<tr>

<td><span class="hack-data">*+html</span> .eq {color:#000;}</td>

</tr>

<tr>

<td>html* .eq {color:#000;}</td>

</tr>

<tr>

<td>.eq {color:red;[;color:blue;}</td>

</tr>

<tr>

<td>html>body .eq {color:blue;}</td>

</tr>

<tr>

<td>html>/**/body .eq {color:blue;}</td>

</tr>

<tr>

<td>html/**/>body .eq {color:blue;}</td>

</tr>

<tr>

<td class="hack-data">@media all and (min-width:0px){}</td>

<td><span class="hack-data">@media all and (min-width:0px){.eq {color:#000;}}</span></td>

</tr>

<tr>

<td class="hack-data">*:first-child+html</td>

<td>*:first-child+html .eq {color:blue;}</td>

</tr>

<tr>

<td class="hack-data">*:first-child+html{} *html</td>

<td>*:first-child+html{} *html .eq {color:blue;}</td>

</tr>

<tr>

<td class="hack-data">@-moz-document url-prefix(){}</td>

<td>@-moz-document url-prefix(){ .eq {color:blue;}}</td>

</tr>

<tr>

<td class="hack-data">@media screen and (-webkit-min-device-pixel-ratio:0){}</td>

<td>@media screen and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}}</td>

</tr>

<tr>

<td class="hack-data">@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){}</td>

<td><span class="hack-data">@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}}</span></td>

</tr>

<tr>

<td>body:nth-of-type(1) .eq {color:blue;}</td>

</tr>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

<p>FF:firefox; OP:opera; SA:safari; CH:chrome; <b>Y</b>代表支持，<b class="red">N</b>代表不支持。</p>

<div class="hack-list-inf">由于各浏览器更新神速，所以有些HACK可能会有变化，所以请大家注意。</div>

</li>

<div class="hack-list-inf"><em>[;</em>此种方式会影响后续样式，不可取。</div>

</li>

<div class="hack-list-inf"><em>\9\0</em>并非对所有属性都能区分IE8和IE9.比如：background-color可以，但background不可以，还有border也不可以。所以在实际用时要测试下。</div>

</li>

<div class="hack-list-inf">当同时出现<em>\0</em>;<em>*</em>;<em>_</em>;时，推荐将\0写在*和_前面。例如:color:red\0;*color:blue;_color:green;可行，否则IE7和IE6里的效果会失效。但border例外，放在前后都可以。保险起见，还是放在前面。 </div>

</li>

</ul>

<pre>

.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专属*/

</pre>

</div>

</body>

示例：

<!DOCTYPE html>

<html>

<head>

@media screen\0 {

body {

background: lightblue;

}

</style>

</head>

<body>

</body>

</html>

运行结果：

1.7、文档模式（X-UA-Compatible）

文档模式是IE8浏览器以后的一种独有技术，他可以通过meta指定当前文档的渲染模式，如可以把IE8降级成IE6、IE7使用。文档模式的主要作用是影响浏览器显示网页HTML的方式，用于指定IE的页面排版引擎（Trident）以哪个版本的方式来解析并渲染网页代码。

“X-UA-Compatible”的值有两种方式：Emulate+IE版本号，单纯版本号

EmulateIE8：如果声明了文档类型，则以IE8标准模式渲染页面，否则将文档模式设置为IE5

9：强制以IE9标准模式渲染页面，忽略文档类型声明

x-ua-compatible 头标签大小写不敏感，必须用在 head 中，必须在除 title 外的其他 meta 之前使用。

1 2	<meta http-equiv="x-ua-compatible" content="IE=7,9,10" > <meta http-equiv ="X-UA-Compatible" content = "IE=edge,chrome=1" />

Google Chrome Frame(谷歌内嵌浏览器框架GCF)

插件可以让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核

未指定文档模式时使用默认的文档模式示例：

<!DOCTYPE html>

<html>

<head>

<title>X-UA-Compatible</title>

<style>

#div1 {

width: 100px;

height: 100px;

background: lightgreen;

float: left;

margin-left: 100px;

_margin-left: 50px;

}

</style>

</head>

<body>

</body>

</html>

运行结果：

强制指定文档模式为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、或特定对象。

示例：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

//用于检测浏览器是否为IE

var isIE=function(){

return !!window.ActiveXObject;

}

function show(info){

document.getElementById("msg").innerHTML+=info+"<br/>"

}

//获得用户代理对象，浏览器与操作系统信息

show(navigator.userAgent);

show(isIE()?"是IE浏览器":"不是IE浏览器");

</script>

</body>

</html>

效果：

在user-agent中包含有不少的客户端信息，可以解析出判断浏览器部分的内容。

您可能感兴趣的文章 :

原文链接 :

Tag : 浏览器(15)兼容(7)CSS3(156)

CSS使用SVG实现动态分布的圆环发散路径动画

这个需求也是最近的大屏项目里面需要用到的一个效果，大致需求是实现一个圆形范围内由一个不确定坐标的点向圆周进行曲线发散的效
CSS3浏览器兼容的介绍

一、浏览器兼容 1.1、概要世界上没有任何一个浏览器是一样的，同样的代码在不一样的浏览器上运行就存在兼容性问题。不同浏览器其内核
CSS元素定位之通过元素的标签或者元素的id、cl

大部分人在使用selenium定位元素时，用的是xpath元素定位方式，因为xpath元素定位方式基本能解决定位的需求。xpath元素定位方式更直观，更好
微信小程序纯CSS实现无限弹幕滚动效果

啥也不说，先上效果图实现背景产品：我们需要一个弹幕滚动效果，类似于微博热搜那种实时评论，但是我们的数据是固定的20条，你让他
使用CSS构建强大且酷炫的粒子动画效果

粒子动画，顾名思义，就是页面上存在大量的粒子构建而成的动画。传统的粒子动画主要由 Canvas、WebGL 实现。当然，不使用 HTML + CSS 的主要
flex:1的详细介绍

简单的来说一下在别人问你这个问题的时候怎么来回答它前端新人，如有错误求大佬指出~求教???? 情景复现大佬提问：你知道flex: 1;的更深
新的CSS伪类函数 :is 和 :where()示例介绍

在编写 CSS 时，有时可能会使用很长的选择器列表来定位具有相同样式规则的多个元素。例如，如果您想对标题中的 b 标签进行颜色调整，我
纯CSS打字动画的实现方法

在一些技术网站中，经常会看到这样一种展示效果：逐个显示一段文本中的字符，模拟出一种打字的效果。通过这种方式可以显著地提升网
实现el-form每行显示两列底部按钮居中效果的教程

el-form 每行显示两列，底部按钮居中问题：以前的解决办法是：el-col,el-row。但是这里只有一个el-form-item的label数据是已知的，其余项都是循
CSS实现六边形的图片效果的代码

前言在CodePen上看到一个有意思的效果: 这个效果的难点在于六边形的绘制, 那么接下来我们就一起来看下作者是怎么实现他的吧实现思路