CSS HACK 与float浮动实现代码

一、css hack

  以下两种方法几乎能解决现今所有hack.
  1, !important
  随着ie7对!important的支持, !important 方法现在只针对ie6的hack.(注意写法.记得该声明位置需要提前.)

 

 代码如下 复制代码
<style>
#wrapper
{
width: 100px!important;
width: 80px;
}
</style>
  

2, ie6/ie77对firefox
  *+html 与 *html 是ie特有的标签, firefox 暂不支持.而*+html 又为 ie7特有标签.

 

 代码如下 复制代码
<style>
#wrapper
{
#wrapper { width: 120px; }
*html #wrapper { width: 80px;}
*+html #wrapper { width: 60px;}
}
</style>
  

注意:
  *+html 对ie7的hack 必须保证html顶部有如下声明:
  <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "">

二、float 闭合(清除浮动)

  将以下代码加入global css 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.

 代码如下 复制代码
<style>
.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
.clearfix {display:block;}
</style>

 

时间: 2024-07-29 04:36:57

CSS HACK 与float浮动实现代码的相关文章

CSS技巧:关于CSS Hack与float闭合(清除浮动)

核心提示:CSS技巧:关于CSS Hack与float闭合 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) 2, IE6/IE77对FireFox *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签. <style>#wrapper{#wrapper {

关于CSS Hack与float闭合(清除浮动)

一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; width: 80px; } </style></P> <P> 2, IE6/IE77对FireFox *+html 与 *html 是IE特有的标

关于CSS Hack与float闭合

一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1. !important 随着IE7对!important的支持,!important 方法现在只针对IE6的HACK.(注意写法:记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; width: 80px; } </style> 2.IE6/IE77对FireFox *+html 与 *html 是IE特有的标签,firefox 暂不支持.而*+html

IE浏览器CSS Hack速查表(IE6/7/8/9/10)

CSS Hack的原理是什么 由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系.我们就可以根据这个来针对不同的浏览器来写不同的CSS. CSS Hack大致有3种表现形式,CSS类内部Hack.选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对IE浏览器. 类内部Hack:比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_"

css float清除浮动实现代码

定义和用法 如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止. 默认值: none 继承性: no 版本: css1 网页特效 语法: object.style.cssfloat="left" 实例 把图像向右浮动: img { float:right; } tiy 浏览器支持 所有主流浏览器都支持 float 属性. 注释:任何的版本的 intern

合理应用 正确理解CSS的float浮动属性

css|浮动 首先我们了解到,CSS网页布局的原理,就是按照HTML代码中对象声明的顺序,以流布局的方式来显示它,而流布局就不得不说到float浮动技术,在HTML中的所有对象,默认分为两种:块元素(block element).内联元素(inline element),虽然也存在着可变元素,但只是随上下文关系确定该元素是块元素或者内联元素.关于块元素和内联元素可以参考这里. 其实CSS的float属性,作用就是改变块元素(block element)对象的默认显示方式.block对象设置了fl

css子级用float浮动而父级div没高度不能自适应高度

解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 方法一:使用css clear清除浮动 1.加clear效果完整div css代码 对父级div标签闭合</div>前加一个clear清除浮动对象.  代码如下 复制代码 <!DOCTYPE html> <html> <head> <

CSS不得不掌握的技巧【清除float浮动】

一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了.   浮动产生样式效果截图 本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了float浮动,所以两个黑色盒子产生了浮动,导致红色盒子不能撑开,这样浮动就产生了. 简单地说,浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动. 二.浮动产生负作用 1.背景不能显示 由于浮动产生,如果对父级设置了(C

IE5.0、IE5.5、IE6.0、IE7.0、FF1.5、FF2.0兼容CSS Hack代码范例

css IE7.0简体中文正式版终于发布了,对于我等常和网页打交道的人来说网页兼容性问题也随之而来了.IE7.0有一个显著的改变就是支持!important了,是件好事情,但是也给广大的在IE6时代使用!important来区分处理IE和FF的网页制作者带来了不少问题,Noker也遇到了这个问题,所以翻阅网上资料,写了下面这个能够兼容现今大多数主流浏览器,覆盖绝大多数用户的Hack代码,发布在自己的论坛上,供大家查看,研究,取用.如有相关问题欢迎跟贴探讨,谢谢! 兼容浏览器版本:IE5.0,IE