52CSS边距 —— 一款针对IE7的CSS hack用法实例
作者：Fred.ren 来源：Div之家（转载请注明）
在52CSS.com十月五日的文章中，我们通过文章“一款针对IE6的CSS hack用法实例 — 52CSS边线”向大家介绍了，在IE6中如何使用CSS HACK的问题。通过实例的讲解，大家能加深印象，对CSS HACK的使用能够尽快的掌握。今天的实例将介绍IE7中CSS HACK的用法，与上一篇文章类似，本案例通过边距的形式向大家作讲解。
CSS HACK与css兼容性的文章有：
一款针对IE6的CSS hack用法实例 — 52CSS边线
http://www.52css.com/article.asp?id=863
CSS Hack代码范例：兼容IE5.0、IE5.5、IE6.0、IE7.0、FF1.5、FF2.0
http://www.52css.com/article.asp?id=280
CSS Hack技术速查对照
http://www.52css.com/article.asp?id=460
CSS实例：区分IE6、IE7、FF对HR解释的CSS hack
http://www.52css.com/article.asp?id=558
CSS hacks：浏览器特定选择器介绍
http://www.52css.com/article.asp?id=635
必须掌握的关于IE6、IE7和FF最简单的CSS hack技巧
http://www.52css.com/article.asp?id=826
本文作者：52CSS.com 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！
废话少说，我们开始切入正题，看下面的HTML代码：
Example Source Code [www.52css.com]<h3><a href="http://www.52css.com/">我爱CSS CSS Web Design -Web标准化 Div+css教程</a></h3>
<p>本文作者：<a href="http://www.52css.com/">52CSS.com</a> 如需转载请建立本站链接（<a href="http://www.52css.com/">http://www.52css.com/</a>），并且不得随意改动文章内容、保留此版权声明文本！</p>
首先是一个标题标签H3，用于放置LOGO图片元素。紧接着是一个段落p，放置了一段文本。我们通过CSS样式，对它们的外观进行定义。
Example Source Code [www.52css.com]body {
margin:0;
padding:0;
}
h3 {
margin:50px auto 10px auto;
width:450px;
height:60px;
padding:5px;
border:1px solid #03c;
}
h3 a {
display:block;
width:450px; height:60px;
text-indent:480px;
white-space:nowrap;
background:url(logo.jpg) no-repeat 0 0;
overflow:hidden;
}
p {
width:450px;
padding:8px 5px;
margin:0 auto;
text-align:center;
font-size:12px;
line-height:20px;
border:1px solid #03c;
}
基本的定义我们在这里就不赘述了，两者都有1像素的边框线。标题标签的外边距定义，左右为自动，上部50px，下部10px。我们运行上面的代码得到了如下图所示的效果。请注意，此效果在IE6、IE7和FF中一致。
▲▲▲ >>>点击查看运行效果<<<
本文主要讲解的是IE7的CSS HACK的应用实例。我们在实际开发中，往往遇到IE7和IE6、FF的外边距理解不同的问题，可能引起这一现象的原因，现在忆不起来了，但在您的开发中也可能会遇到。我们需要通过IE7的CSS HACK，设置有别于IE6和FF的外边距效果。我们试着让本实例，在IE7中H3和p的间隔更大一些，达到50px。我们用CSS HACK进行设置。看下面的CSS代码。
Example Source Code [www.52css.com]body {
margin:0;
padding:0;
}
h3 {
margin:50px auto 10px auto;
width:450px;
height:60px;
padding:5px;
border:1px solid #03c;
}
h3 a {
display:block;
width:450px; height:60px;
text-indent:480px;
white-space:nowrap;
background:url(logo.jpg) no-repeat 0 0;
overflow:hidden;
}
p {
width:450px;
padding:8px 5px;
margin:0 auto;
text-align:center;
font-size:12px;
line-height:20px;
border:1px solid #03c;
}
*+html h3{
margin-bottom:50px;
}
细心的您已经发现，在CSS代码的末端，增加了一条属性的定义，选择器为“*+html h3”。需要您牢记的是“*+html”针对IE7浏览器的CSS HACK选择器。我们定义了在IE7中的h3，下外边距为50px。运行后得到了如图的效果。
本文作者：52CSS.com 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！
▲▲▲ >>>点击查看运行效果<<< （IE7环境）
其实只是些微的改变，就可以实现想要达到的效果了。我们在实例开发中需要灵活运用。如果我们需要在IE7中，将段落的边框线变成红色，只需要增加下面的语句就可以了。
Example Source Code [www.52css.com]*+html p{
border:1px solid #f00;
}
▲▲▲ >>>点击查看运行效果<<< （IE7环境）
本文作者：52CSS.com 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！
是不是很简单？其实CSS HACK一点儿也不复杂，如果文档具有良好的结构，所需要用到的地方也非常少。52CSS.com将继续推出此类问题的实例，欢迎您予以关注，有何好的发现与建议，欢迎您给我留言，与大家分享。感谢您的支持！
CSS HACK与css兼容性的文章有：
一款针对IE6的CSS hack用法实例 — 52CSS边线
http://www.52css.com/article.asp?id=863
CSS Hack代码范例：兼容IE5.0、IE5.5、IE6.0、IE7.0、FF1.5、FF2.0
http://www.52css.com/article.asp?id=280
CSS Hack技术速查对照
http://www.52css.com/article.asp?id=460
CSS实例：区分IE6、IE7、FF对HR解释的CSS hack
http://www.52css.com/article.asp?id=558
CSS hacks：浏览器特定选择器介绍
http://www.52css.com/article.asp?id=635
必须掌握的关于IE6、IE7和FF最简单的CSS hack技巧
http://www.52css.com/article.asp?id=826
本文作者：52CSS.com 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！
废话少说，我们开始切入正题，看下面的HTML代码：
Example Source Code [www.52css.com]<h3><a href="http://www.52css.com/">我爱CSS CSS Web Design -Web标准化 Div+css教程</a></h3><p>本文作者：<a href="http://www.52css.com/">52CSS.com</a> 如需转载请建立本站链接（<a href="http://www.52css.com/">http://www.52css.com/</a>），并且不得随意改动文章内容、保留此版权声明文本！</p>
首先是一个标题标签H3，用于放置LOGO图片元素。紧接着是一个段落p，放置了一段文本。我们通过CSS样式，对它们的外观进行定义。
Example Source Code [www.52css.com]body { margin:0;
padding:0;
}
h3 {
margin:50px auto 10px auto;
width:450px;
height:60px;
padding:5px;
border:1px solid #03c;
}
h3 a {
display:block;
width:450px; height:60px;
text-indent:480px;
white-space:nowrap;
background:url(logo.jpg) no-repeat 0 0;
overflow:hidden;
}
p {
width:450px;
padding:8px 5px;
margin:0 auto;
text-align:center;
font-size:12px;
line-height:20px;
border:1px solid #03c;
}
基本的定义我们在这里就不赘述了，两者都有1像素的边框线。标题标签的外边距定义，左右为自动，上部50px，下部10px。我们运行上面的代码得到了如下图所示的效果。请注意，此效果在IE6、IE7和FF中一致。
▲▲▲ >>>点击查看运行效果<<<
本文主要讲解的是IE7的CSS HACK的应用实例。我们在实际开发中，往往遇到IE7和IE6、FF的外边距理解不同的问题，可能引起这一现象的原因，现在忆不起来了，但在您的开发中也可能会遇到。我们需要通过IE7的CSS HACK，设置有别于IE6和FF的外边距效果。我们试着让本实例，在IE7中H3和p的间隔更大一些，达到50px。我们用CSS HACK进行设置。看下面的CSS代码。
Example Source Code [www.52css.com]body { margin:0;
padding:0;
}
h3 {
margin:50px auto 10px auto;
width:450px;
height:60px;
padding:5px;
border:1px solid #03c;
}
h3 a {
display:block;
width:450px; height:60px;
text-indent:480px;
white-space:nowrap;
background:url(logo.jpg) no-repeat 0 0;
overflow:hidden;
}
p {
width:450px;
padding:8px 5px;
margin:0 auto;
text-align:center;
font-size:12px;
line-height:20px;
border:1px solid #03c;
}
*+html h3{
margin-bottom:50px;
}
细心的您已经发现，在CSS代码的末端，增加了一条属性的定义，选择器为“*+html h3”。需要您牢记的是“*+html”针对IE7浏览器的CSS HACK选择器。我们定义了在IE7中的h3，下外边距为50px。运行后得到了如图的效果。
本文作者：52CSS.com 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！
▲▲▲ >>>点击查看运行效果<<< （IE7环境）
其实只是些微的改变，就可以实现想要达到的效果了。我们在实例开发中需要灵活运用。如果我们需要在IE7中，将段落的边框线变成红色，只需要增加下面的语句就可以了。
Example Source Code [www.52css.com]*+html p{border:1px solid #f00;
}
▲▲▲ >>>点击查看运行效果<<< （IE7环境）
本文作者：52CSS.com 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！
是不是很简单？其实CSS HACK一点儿也不复杂，如果文档具有良好的结构，所需要用到的地方也非常少。52CSS.com将继续推出此类问题的实例，欢迎您予以关注，有何好的发现与建议，欢迎您给我留言，与大家分享。感谢您的支持！
