css代码兼容解决,css 常见兼容性问题及解决方案

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左右内距，多数情况下代码如下：

left

main

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示例如下:

main

css代码：

#left{

width:220px;

float:left;

}

#left .innerLeft{

padding:0 10px;

}

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

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

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

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

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

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

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

CSS常见兼容性问题总结

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

CSS常见兼容性问题

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

前端之CSS常见兼容性问题

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

css CSS常见布局解决方案

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

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

水平居中布局 margin+定宽

Demo

随机推荐

Mac iTerm with Powerline

1. 下载iTerm 地址: http://www.iterm2.com/ 完全可以取代Mac自带的终端了. 2. 之前我装过oh-my-zsh git clone git://github.com/ ...

C语言的声明和定义

在程序设计中,时时刻刻都用到变量的定义和变量的声明,可有些时候我们对这个概念不是很清楚,知道它是怎么用,但却不知是怎么一会事. 下面我就简单的把他们的区别介绍如下: 变量的声明有两种情况: (1)一种 ...

Spring Cloud Config

Spring Cloud Config provides server and client-side support for externalized configuration in a dist ...

中文分词算法之最大正向匹配算法(Python版)

最大匹配算法是自然语言处理中的中文匹配算法中最基础的算法,分为正向和逆向,原理都是一样的. 正向最大匹配算法,故名思意,从左向右扫描寻找词的最大匹配. 首先我们可以规定一个词的最大长度,每次扫描的时候 ...

bat执行java程序的脚本解析

使用java执行带Package的class文件java package1.package2.className  或java -cp .  package1.package2.className - ...

Cocos2d-X中实现批处理精灵

使用普通方法实现批处理精灵 在Sprite.h中加入以下的代码 #ifndef __Sprite_SCENE_H__ #define __Sprite_SCENE_H__ #include &quot ...

02MYSQL查询语句

查询语句是用于将表里的数据查询出来==查询可以返回一个结果集(表) | 或者的意思   * 代表当前表的所有字段 **查询语句的语法:select *| 字段名列表 from 表名 [where 条件 ...

工厂方法模式(Factory Method)和抽象工厂模式(Abstact Factory)

分类 工厂模式主要是为创建对象提供过渡接口,以便将创建对象的具体过程屏蔽隔离起来,达到提高灵活性的目的.工厂模式在中分为三类:1)简单工厂模式(Simple Facto ...