兼容的网页宽度margin padding

简介:

hack兼容:

-moz-  /* Firefox 4 */
-webkit- /* Safari 和 Chrome */
-o-  /* Opera */

IE6承认*和_和+,不承认!important
IE7识别*和+,不识别_,识别!imortant
而firfox两个都不识别,识别!important 
<!--[if lt IE 9]>  
   <script src="http://html5shim.googlecode.com.svn/trunk/html5.js"></script>  
<![endif]-->

selector{
background-color:#f00;/*all*/
background-color:#0ff\0;/* ie 8/9 */
background-color:#0f0\9\0;/* ie9 */ 这个经过常识ie8也一样有效,不好使
*background-color:#00f;/*ie6 7*/
_background-color:#ff0;/*ie6*/
background-color//:#090;/*非IE*/
background-color:#900\9;/*全部ie*/
}
当然。还有专门针对IE7的写法:+background-color:#00f;
之前对css hack做过一个简单的汇总《CSS hack 汇总》,如今进行一些更新:

    “\9“  仅仅在IE6/IE7/IE8/IE9/IE10下生效
    “\0”  仅仅在 IE8/IE9/IE10下生效
    “\9\0”仅仅在IE9/IE10下生效

故眼下假设须要仅仅针对ie8的hack,可先使用在IE8/IE9/IE10生效的“\0”,再用仅在IE9/IE10生效的“\9\0”hack覆盖之前的样式。




selector{
color:#000;
color:#F00\0;   /* only for IE8&IE9&IE10 */
color:#000\9\0; /* only for IE9&IE10 */
}

框架用990,非框架用1000

1、设了float:left的元素同意它的右边存在不论什么元素同行显示。不论是内联元素还是块元素。但它的左边还是不同意存在不论什么元素与之同行显示,哪怕其他的元素的代码在前,除非也给前面的元素加上float:left后,才同意同行显示。
设了display:inline的元素,同意它的前后存在其他的内联元素同行显示。关于代码在其前面的块元素之同行显示,则要让前面的元素浮动(无论是左还是右浮动)或设为display:inline。还有代码在后面的是块元素(管它有没有浮动,是左浮动还是右浮动),均不能与之同行,除非设为display:inline。
另外,给块级元素设上display:inline是解决有名的IE6中双倍浮动的利器。
2、float 能使块级元素变成行间元素! 
3、.行间元素仅仅有左右外边距。无上下外边距,且左右外边距不会合并!仅仅有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。


4、IE6对BOX理解的差异导致设为float的div在ie下margin的值会加倍(块级元素margin都会加倍,且float方向和margin同方向时)。如:
 #box{ float:left; width:100px; margin:0 0 0 50px; }

 //这样的情况之下IE会产生100px的距离
 解决方法例如以下:
 #box{ float:left; width:100px; margin:0 0 0 50px; display:inline;}
 //仅仅需给其加display:inline属性使使浮动忽略。就可以解决
5、
float元素的宽度之和要小于100% 
6. float元素务必指定width属性 
  非常多浏览器在显示未指定width的float元素时会有bug。所以无论float元素的内容怎样。一定要为其指定width属性。 
  另外指定元素时尽量使用em而不是px做单位。


7. float元素不能指定margin和padding等属性 

  IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(能够在float元素内部嵌套一个div来设置margin和padding)。也能够使用hack方法为IE指定特别的值。

8、padding:添加padding值会增加整体尺寸

版权声明:本文博客原创文章。博客,未经同意,不得转载。







本文转自mfrbuaa博客园博客,原文链接:http://www.cnblogs.com/mfrbuaa/p/4678001.html,如需转载请自行联系原作者


相关文章
|
监控 NoSQL 数据库
云数据库MongoDB监控指标解读与关注
为方便开发者的使用,云数据库MongoDB提供了许多查看其运行状态指标的命令。如何分析这些繁多的数据指标?又如何使用这些数据指标解决我们业务中出现的问题呢?本文将带大家了解查看这些监控指标的命令并为大家逐一解读其中一些重要的指标。
11284 0
|
10月前
|
分布式计算 DataWorks 数据处理
产品测评 | 上手分布式Python计算服务MaxFrame产品最佳实践
MaxFrame是阿里云自研的分布式计算框架,专为大数据处理设计,提供高效便捷的Python开发体验。其主要功能包括Python编程接口、直接利用MaxCompute资源、与MaxCompute Notebook集成及镜像管理功能。本文基于MaxFrame最佳实践,详细介绍了在DataWorks中使用MaxFrame创建数据源、PyODPS节点和MaxFrame会话的过程,并展示了如何通过MaxFrame实现分布式Pandas处理和大语言模型数据处理。测评反馈指出,虽然MaxFrame具备强大的数据处理能力,但在文档细节和新手友好性方面仍有改进空间。
|
9月前
|
自然语言处理 运维 Linux
阿里云操作系统智能助手OS Copilot测评报告及建议
阿里云推出的OS Copilot是一款基于大模型构建的操作系统智能助手,旨在通过自然语言处理技术与操作系统经验的深度融合,为Linux用户提供前所未有的使用体验。它具备自然语言问答、辅助命令执行和系统运维调优等核心功能,极大降低了Linux的学习门槛,提升了工作效率。测试显示,OS Copilot在功能、性能、易用性和实用性方面表现出色,能够帮助用户高效解决问题并优化系统性能。未来,期待其持续优化升级,加入更多实用功能,进一步提升用户体验。
324 4
|
10月前
|
JSON 数据挖掘 API
京东店铺所有商品 API 接口系列(京东 API)
京东店铺所有商品API接口用于获取指定店铺的全面商品信息,包括基本属性、价格、库存、销售数据等。前期需仔细研读接口文档,掌握请求地址、参数格式及频率限制。接口支持分页和筛选参数,返回JSON格式数据。Python示例中使用`requests`库发送HTTP请求并处理返回数据。该API适用于竞品分析、商品管理工具开发、市场调研及价格监测等场景,助力电商从业者优化运营策略。
|
11月前
|
人工智能 大数据 Apache
Flink Forward Asia 2024 即将盛大开幕!
Flink Forward Asia 2024是由Apache官方授权的技术大会,聚焦流式湖仓、流批一体、AI大模型等热点方向,旨在分享Flink社区最新动态及实践经验,是Flink开发者和使用者不容错过的盛会。大会不仅探讨了Flink在实时大数据分析中的应用,还深入讨论了Data+AI领域的新成果,如基于Flink和Elasticsearch的企业级高级RAG架构设计,展示了Flink在多模态数据处理、实时数据向量化等方面的强大能力。
|
存储 安全 Java
利用POI多线程导出数据错位解决
通过反射替换解决
954 0
|
网络协议 网络虚拟化
华为—Super VLAN
华为—Super VLAN
632 0
华为—Super VLAN
uiu
|
存储 分布式计算 网络协议
带你快速进阶:HDFS架构与操作
带你快速进阶:HDFS架构与操作
uiu
581 0
带你快速进阶:HDFS架构与操作
|
JSON 数据格式
解决报错信息之:SyntaxError: Unexpected token R in JSON at position 0
解决报错信息之:SyntaxError: Unexpected token R in JSON at position 0
840 0
|
SQL Oracle 关系型数据库
SQL99中的natural join 和 using
natural join 叫自然连接,是SQL99语法中支持的一种连接方式,mysql与oracle等主流数据库均支持这种语法。natural join 无需声明连接条件,sql执行器会自动寻找连接的两个表中相同的字段去生成连接条件,然后取数据的交集。
489 0