css 兼容问题一直是困扰前端开发人员的大难题,提到兼容性立马想到了万恶的ie6,说多了都是泪,还是整理一些常见的兼容性问题以及解决的方案吧。

一. 浮动元素双边距。

 ①条件:ie6下,如果给元素设置float,同时给float同一方向设置margin值,则ie6下表现出双倍的边距

② 代码:

.demo {
background: #95cfef;
border: 1px solid #36f;
float: left;
height: 100px;
margin: 30px 0 0 30px;
width: 300px;
  }

 ③浏览器表现

  

④ 解决方案

  css hack 方式 在ie6下单独设置margin值,如_margin:15px 0 0 30px;

推荐给float元素添加display:inline 属性

二 . box-model  设置padding和border改变box的宽度

准确来讲这不是浏览器bug,只是很多时候可能我们经常会犯的错误,看下面的例子:

我们进行行一个960px的布局,里面左边栏是220px的宽度,主内容是720px的宽度,他们之间是20px的间距,此时设计需要在左边栏 有一个10px左右内距,多数情况下代码如下:

 <div id="wrap">
<div id="left">left</div>
<div id="content">main</div>
</div>

css如下:

         #wrap {
width: 960px;
background: #66CCFF
}
#left {
background: #FFCC99;
float: left;
padding: 0 10px;
width: 220px;
}
#right {
background: #9933CC;
float: right;
width: 720px;
}

而看看效果:

  

添加完padding值后,left和right之间的20px已经消失了, 原因呢则是 元素在网页中的宽度是width+padding-left+padding-right+border-left+border-right,(margin不算到box的宽度上,只是影响box和周围元素的距离),所以在网页中实际占宽是240px。

解决办法有两个,方案一是重新计算宽度,比如该例中:

     #left {
background: #FFCC99;
float: left;
padding: 0 10px;
width: 200px;
}

方案一的做法将元素的width和padding 设置在同一元素样式中,如果涉及到后期对于padding值有改动或者其他类似的需求的话,需要重新计算高度,多次修改,所以不推荐方案一。

方案二是在#left内部添加一元素,html示例如下:

<div id="wrap">
<div id="left">
<div class="innerLeft">
</div>
</div>
<div id="content">main</div>
</div>

css代码:

#left{
width:220px;
float:left;
} #left .innerLeft{
padding:0 10px;
}

这么做呢主要是width padding margin三权分立的写法,具体情况原理参考另一篇博文,《从div盒子模型谈如何写可维护的css代码》

css 常见兼容性问题及解决方案的更多相关文章

  1. IE6下CSS常见兼容性问题及解决方案

    1. 在IE6元素浮动,如果宽度需要内容撑开,就给里面的块元素加浮动. 2. IE6下最小高度问题:在IE6下元素高度小于19px的时候,会被当作19px处理.解决方案:给元素加 overflow:h ...

  2. IE6中CSS常见BUG全集及解决方案——摘自网友

    IE6中CSS常见BUG全集及解决方案 IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, ...

  3. 常见CSS浏览器兼容性问题与解决方案【转载自http://blog.csdn.net/chuyuqing/article/details/37561313/】

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...

  4. jquery博客收集的IE6中CSS常见BUG全集及解决方案

    今天的样式调的纠结,一会这边一会那么把jquery博客折腾的头大,浏览器兼容性.晚上闲着收集一些常见IE6中的BUG 3像素问题及解决办法 当使用float浮动容器后,在IE6下会产生3px的空隙,有 ...

  5. CSS常见兼容性问题总结

    原文链接:渔人码头 http://www.cnblogs.com/imwtr/p/4340010.html?utm_source=tuicool&utm_medium=referral 浏览器 ...

  6. CSS常见兼容性问题

    DOCTYPE 影响 CSS 处理 Firefox: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 Firefox: body 设置 tex ...

  7. 前端之CSS常见兼容性问题

    1.双倍浮动BUG: 描述:块状元素设置了float属性后,又设置了横向的margin值,在IE6下显示的margin值要比设置的值大: 解决方案:给float的元素添加 display:inline ...

  8. css CSS常见布局解决方案

    CSS常见布局解决方案说起css布局,那么一定得聊聊盒模型,清除浮动,position,display什么的,但本篇本不是讲这些基础知识的,而是给出各种布局的解决方案.水平居中布局首先我们来看看水平居 ...

  9. 前端进阶系列(二):css常见布局解决方案

    水平居中布局 margin+定宽 <div class="parent"> <div class="child">Demo</di ...

随机推荐

  1. Java集合类之向量Vector

    package com.test; import java.util.*; public class Demo7_3 { public static void main(String[] args) ...

  2. linux 匹配查询列表中包含某一特殊字符的所有行中的某一列

    命令: ll | grep sh | awk '{print $9}' 解析: 其中,匹配列的命令为awk '{print $n}',$n为匹配的第几列.

  3. 编译android后找不到ramdisk-u.img[已解决]

    --- --- #!/bin/bash OUTDIR=out/target/product/tiny4412AHOSTBIN=out/host/linux-x86/bin # install vend ...

  4. string.Split函数

    正文 string str = "a---b---c"; string[] array = str.Split(new char[]{'-'}); 分割之后array中的元素为 分 ...

  5. ArrayList Iterator remove java.lang.UnsupportedOperationException

    在使用Arrays.asList()后调用add,remove这些method时出现 java.lang.UnsupportedOperationException异常.这是由于Arrays.asLi ...

  6. Facebook的Pop动画库相关资料

    https://github.com/facebook/pop http://www.cocoachina.com/industry/20140507/8339.html http://www.ui. ...

  7. ActiveX添加测试工程, 出现的问题[非选择性参数][找不到成员]

    ActiveX 添加测试工程 1.新建工程MFC application, 2.添加完毕,在main Dialog中, 右键[Insert Activex Control],选择你的ActiveX控件 ...

  8. import project后,出现Unable to get system library for the project

    import project 后,出现Unable to get system library for the project. 这是因为在import 一个项目的时候,没有指定android sdk ...

  9. 未能找到类型或命名空间“Compare”

    在用vs2012  .net Framework4.5  Mvc3做一个MVCMusicStore 的例子时,遇到这样一个问题 解决办法: 具体原因也不是很清楚,据说是引用Compare做验证时会有二 ...

  10. oracle 日志学习(转载)

    一,重做日志概念 重做日志文件(redo log file)对于Oracle数据库至关重要.它们是数据库的事务日志.通常只用于恢复,不过也可以用于以下工作: q 系统崩溃后的实例恢复 q 通过备份恢复 ...