ie6 ie7 盒子模型规则

<ul>
    <li><span></span><a href="#" target="_blank">无序列表</a></li>
    <li><span></span><a href="#" target="_blank">无序列表</a></li>
</ul>

  

ul li{
    font-family:"宋体";
    line-height:24px;
    position:relative;
    text-indent:14px;
    width:272px;
    height:24px;
    overflow:hidden;
}
 ul li span{
    width:3px;
    height:3px;
    background:#333;
    font-size:3px;
    position:absolute;
    top:10px;
    left:0;
}

  假如li不设宽高,自定义的小方块可能就会错位。

时间: 2024-07-30 02:49:58

ie6 ie7 盒子模型规则的相关文章

CSS3:box-sizing:不再为盒子模型而烦恼

题外话: W3C奉行的标准,就是content-box,就是需要计算边框,填充还有内容的;但是就我个人而言, 比较喜欢的是传统IE6时候的怪异模式,不用考虑容器是否会被撑开(打乱布局); 盒子模型差异 盒子大小计算原理 W3C标准盒子 = (边框 + 填充 + 内容块大小) ,牵一发而动全身; 传统IE6盒子 = 整体宽高(边框,填充和随盒子大小而调整变化) 若是计算占用位置,两种盒子都要算上margin(边距) 简言之,W3C标准盒子是需要相加各种大小得到总体的宽高,而传统的IE6是从整体减去

CSS的盒子模型(Box Model)

盒子模型(Box Model)是 CSS 的核心,现代 Web 布局设计简单说就是一堆盒子的排列与嵌套,掌握了盒子模型与它们的摆放控制,会发现再复杂的页面也不过如此. 然而,任何美好的事物都有缺憾,盒子模型有两种不同的诠释,一种来自 IE6,一种来自W3C 标准浏览器. 盒子模型 下图就是一个典型的盒子模型示意图在内容区外面,依次围绕着 padding 区,border 区,margin 区,这一模型结构在所有主流浏览器都是一致的. 通过盒子模型,我们可以为我们的内容设置边界,留白以及边距,盒子

CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法

关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对… 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HA

[转]CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法

CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法 2013-12-12  By 奥夫 关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对… 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !impo

DIV+CSS IE6/IE7/IE8/FF兼容问题汇总

1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了 <meta http-equiv="x-ua-compatible" content="ie=7" /> 2.flaot浮动造成IE6下面双倍边距问题,这个最常见,也最好处理,!important解决,比如 margin-left:10px !important;; margin-left:5px; +height:120px

CSS完美兼容IE6/IE7/FF的通用方法

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

IE6/IE7/IE8/FF兼容问题汇总,以及解决方案

1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了<meta http-equiv="x-ua-compatible" content="ie=7" />2.flaot浮动造成IE6下面双倍边距问题,这个最常见,也最好处理,!important解决,比如margin-left:10px !important;;margin-left:5px;+height:120px;5.有时

深入理解CSS盒子模型

前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverflow上求助.ifaou在帮助我解决我问题的同时,还推荐我阅读一篇有关CSS盒子模型的文章<The CSS Box Model>,阅读之后受益匪浅,才知道自己对盒子模型知识还是如此欠缺.恰逢学期末,项目验收后暂时告一段落,有空闲的时间.于是想把这篇文章翻译出来,一方面再给自己一点挑战和锻炼,另一方面也给大家参考,让更多的人受益. 这篇文章适合初级web设计朋友,让你对盒子模型有更近一步的理解.但是在阅读这篇文

转载:ie6,ie7兼容性总结

其实浏览器的不兼容,我们往往是各个浏览器对于一些标准的定义不一致导致的,因此,我们可以进行一些初始化,很多问题都很轻松解决. 下面是14条特殊情况仅供参考:1. 文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff 下实际占高17px,上留白1px,下留白3px,opera下就更不一样了.解决方案:给文字设定 line-height .确保所有文字都有默认的 line-height 值.这点很重要,在高度