CSS Hack是什么?ie6,7,8的hack分别是什么

简介: CSS Hack是什么?ie6,7,8的hack分别是什么

CSS Hack是一种针对不同浏览器(如Internet Explorer、Firefox、Opera等)的CSS样式特殊写法,通过使用不同的CSS语法或者使用特定条件的判断语句,让CSS代码能够针对不同的浏览器进行差异化渲染,从而达到兼容的目的。

对于Internet Explorer 6、7、8,CSS Hack主要有以下几种写法:

条件注释法

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css">
<![endif]-->

在上面的代码中,通过条件注释法,针对不同的IE版本加载不同的CSS样式表文件。

属性选择器法

对于IE6,可以使用属性选择器法来写Hack,例如:

*+html .selector {color: red;} /* IE6 */

对于IE7,可以使用以下代码:

css*:first-child+html .selector {color: red;} /* IE7 */

对于IE8,可以使用以下代码:

css*+html .selector {color: red;} /* IE8 */

针对盒模型的Hack写法

针对IE6的盒模型Hack写法如下:

.selector {width: 100px; padding: 0 10px; _width: 90px; _padding: 0;} /* IE6 */

针对IE7的盒模型Hack写法如下:

.selector {width: 100px; padding: 0 10px; zoom:1;} /* IE7 */
相关文章
|
6月前
|
前端开发 JavaScript UED
css中什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
css中什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
28 0
|
7月前
|
前端开发 开发者
介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的?
介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的?
|
11月前
|
Web App开发 前端开发
区分IE6,IE7,IE8,IE9,FireFox,Chrome浏览器的CSS hack
区分IE6,IE7,IE8,IE9,FireFox,Chrome浏览器的CSS hack
|
前端开发
【CSS】5分钟带你彻底搞懂 W3C & IE 盒模型!🔥🔥
前言 大家好,我是HoMeTown,CSS是作为前端必有技术栈之一,但是有很多同学其实对CSS的盒模型都不是很了解,今天想聊一下Css盒子模型。
69 0
|
Web App开发 SQL iOS开发
html-day10css兼容问题及常见的bug&hack
html-day10css兼容问题及常见的bug&hack
|
Web App开发 前端开发 iOS开发
CSS hack | 学习笔记
快速学习CSS hack
68 0
CSS hack | 学习笔记
|
Web App开发 前端开发 iOS开发
|
前端开发 UED
不得不收藏的——IE中CSS-filter滤镜小知识大全
前段时间在做一个专题的时候用到了opacity不透明度属性,因为设计图上是半透明背景,白色文字
441 0
不得不收藏的——IE中CSS-filter滤镜小知识大全
|
1天前
|
存储 JavaScript 前端开发
笔.COOL,一个功能完备、使用便捷的在线HTML/CSS/JS以及Vue编辑器和作品分享平台
笔.COOL是一个新兴的在线 HTML/CSS/JS 及 Vue 编辑器,提供实时预览和云端存储功能。用户可以随时随地编写和保存代码,同时分享作品给他人预览和学习。它也是一个实用的 BUG 复现工具,支持嵌入编辑器到博客,促进代码交流。社区活跃,适合开发者展示作品、获取灵感和学习。
|
1天前
|
存储 移动开发 前端开发
使用HTML5和CSS3构建现代网页:技术详解与实践
【5月更文挑战第28天】本文详细介绍了使用HTML5和CSS3构建现代网页的技术与实践。HTML5新增语义化标签、多媒体支持、本地存储和表单验证等功能,提升了网页开发效率和用户体验。CSS3则带来了更多选择器、盒模型改进、背景与边框样式以及动画过渡效果,使网页设计更具视觉冲击力。通过实例展示了如何结合两者创建结构清晰、交互丰富、响应式的现代网页。