Css几个兼容性问题
1.BUG_fireFox!!!一个容器内的子容器如果要左右浮动的话,需要在这个容器设置上样式:"overflow:hidden"。
注:内部元素浮动就会导致外面的容器的高度在firefox中不能够自适应内部元素的高度,所以我们首先
要在父容器的CSS代码中加入“overflow:hidden;”。
2.IE6的双边距问题!!
原因:当父容器当中的子容器(块级元素)有浮动样式的时候,给元素添加margin-left和margin-right样式, 在ie6下就会出现双倍边距。
解决方法1:给当前元素添加样式,使当前元素不为块,如:display:inline;display:list-item 这样在元素浮动 的时候就不会在ie6下面产生双倍边距的问题了。
解决方法2:
flaot浮动造成IE6下面双倍边距问题,这个最常见,也最好处理,!important解决,比如
margin-left:10px !important;/*IE7,IE8,FF下是10PX*/;
margin-left:5px;/*IE6下属性写的是5PX,但在显示出来的是10p
3.ie8下兼容问题,这个最好处理,转化成ie7兼容就可以。在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了。<meta http-equiv="x-ua-compatible" content="ie=7" />
4.清除块display,这个可以解决浮动造成的块,造成块后,当DIV背景填色或填图片的时候,会出现背景断开或差一小块。这种兼容出现的不太多,我做到现在,只遇到过两次,方法是在出现兼容的DIV的CSS中写一个display:block,或其它属性,中文什么意思我不知道,我英语差,但能达到想要的效果,6e"Z+e%|8G#|
5.很多朋友DIV+CSS的时候,会出现,在IE的几个浏览器下都好了,但是在FF出问题了,用!important又会把IE7做的不兼容,很头疼,在想,有没有什么方法只对FF下进行操做,我用过这个方法,感觉得是百试不爽,就是在属性前面加符号如:*、&,¥,#,@,—,+,加过符号的属性只有IE的浏览器才识别,而FF不识别,方法如下(注意有符号的属性和没符号的属性的顺序)
height:100px;/*FF下显示100的高*/
+height:120px;/*IE678下显示120高*/
6.有时候,会在布局的时候,发现,有一个DIV浮动了,接下来的一个DIV本来是要在下面显示的,结果跑上面去了,这种情况一般在FF下面会出现,解决的办法就是清除一下浮动,在设置过浮动的那个DIV下面加一个DIV,CSS面写个clear:both;如下
1. <divstyledivstyle="float:left;height:100px;width:500px;">
2. <divstyledivstyle="clear:both;">
3. <divstyledivstyle="height:100px;width=300px">
7.再就是居中问题,这个问题在新手身上很多,主要原因是对盒子模型不够理解,没熟记盒子模型,如果发现你的页面没有局中,我现在知道的,有这几个原因:
1.一个是没盒子,就是BODY后的一个大DIV把所有DIV装起来的那个,你没写。
2.就是你写了,但是宽度没用绝对宽度:而是用一个相对的宽度,想局中,必须用绝对宽度。
8.扩展:如果我想在设计的时候,实现IE6,IE7,FF下出现三种不同的效果,比如IE6下背景红色,IE7下蓝色FF下绿色,这里,我自己试过,可以,用兼容的方法(注意顺序,可以好好理解一下)。
background:red;/*FF里显示的红色*/
+background:blue!important;/*IE7下面显示的蓝色*/
+background:green;/*IE6下面显示的绿色*/
*********************************************************************************
*********************************************************************************
9.IE6 IE7 IE8 FF浏览器的CSS兼容问题
IE6、IE7、IE8、FF浏览器的CSS兼容问题,本来IE6跟ff之间的兼容是很容易解决的。加上个IE7会麻烦点,IE8的出现就更头疼了,原来hackIE7的方法又不能用了,怎么办呢?
还好,微软提供了这样一个代码:
<metahttp-equivmetahttp-equiv="x-ua-compatible"content="IE=7"/>
把这段代码放到<head>里面,在IE8里面的页面解析起来就跟IE7一模一样的了,所以,基本上可以无视IE8,剩下的代码只需要这样写就可以了
1. background:#ffc;/*对firefox有效*/
2. *background:#ccc;/*对IE7有效*/
3. _background:#000;/*只对IE6有效*/
解释一下吧:
◆firefox能解析第一段,后面的两个因为前面加了特殊符号“*”和“_”,firefox认不了,所以只认background:#ffc,看到的是黄色;
◆IE7前两短都能认,以最后的为准,所以最后解析是background:#ccc,看到的是灰色;
◆IE6三段都能认,而且“_”这个只有IE6能认,所以最后解析是_background:#000,看到的是黑色
已经是最简单和最好理解的写法了,如果你是google进来的,我可以很负责任的告诉你,这种方法是ok的,我测试过。
◆IE8的那段兼容7的代码我也测试过了,在我现在的windos7测试版所带的IE8是没问题的,以后IE8正式版出来还管不管用就不知道了。
ps:如果你发现按我这样写还是有问题的话,请查看一下你的html头,看看<head>之前的内容是不是这样的标准写法
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
这个是现在比较规范的写法,如果你是用dreamweaver做页面的话,默认也是这种规范的,切记,非这种规范写法的,兼容性不能保证。
10.解决IE6、IE7、Firefox兼容最简单的CSSHack
#someNode
{
position:fixed;
#position:fixed;
_position:fixed;
}
第一排给Firefox以及其他浏览器看
第二排给IE7(可能以后的IE8、IE9也是如此,谁知道呢)
第三排给IE6以及更老的版本看
最好的应用就是可以让IE6也“支持”position:fixed,而且,配合这个原理,可以做到不引入JavaScript代码(仅用IE6的expression),我这里有一个现成的页面,CSS如下写:
#ff-r
{
position:fixed;
_position:absolute;
right:15px;
top:15px;
_top:expression(eval(document.compatMode&&
document.compatMode=='CSS1Compat')?
documentElement.scrollTop+15:
document.body.scrollTop+
(document.body.clientHeight
-this.clientHeight));
}
Css代码
<style type=”text/css”>
#body {
border:2px solid #00f; /*ff的属性*/
border:2px solid #090\9; /* IE6/7/8的属性 */
border:2px solid #F90\0; /* IE8支持 */
_border:2px solid #f00; /*IE6的属性*/
}
</style>
Html代码
<div id=”body”>
<ul>
<li>FF下蓝边</li>
<li>IE6下红边</li>
<li>IE7下绿边</li>
<li>IE8下黄边</li>
</ul>
</div>
注:css顺序不能写错,因为ff不认识\9,\0,_写法,所以为蓝边;\9是IE6,7,8的属性,下面代码并没有重写IE7的代码,所以IE7下绿边;同理,\0为ie8属性,相当于重写了颜色,所以IE8下为黄边,_是ie6的属性,重写颜色为红边。
11.div错位/解决IE6、IE7、IE8样式不兼容问题
" IE6里DIV错位的问题"
采用"FLOAT:LEFT"的DIV在IE8、IE7、都没问题,IE6下却向下移动,出现空白。这是因为,IE6采用的内核默认把DIV之间的距离增加了3~5个PX,所以,试试是将下移的DIV的STYLE里增加"margin-left:-5px;"或者更小。
未完,引用自:http://www.douban.com/note/163291324/
Css几个兼容性问题的更多相关文章
- CSS+JS实现兼容性很好的无限级下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...
- css不同浏览器兼容性调试 --- 转自: [http://wo.115.com/?ct=detail&id=31733&bid=1018841]
css不同浏览器兼容性调试 IE6.0,IE7.0与Firefox的CSS兼容性问题1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right ...
- CSS 多浏览器兼容性问题及解决方案
兼容性处理要点1.DOCTYPE 影响 CSS 处理 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 ...
- CSS常见问题及兼容性
CSS常见问题 1 (IE6,7)H5标签兼容 解决方法1:(只显示核心代码) 1<script> ; ; ; ;;;};;;;;;;; ...
- 在sublimen中整理CSS代码及其兼容性问题
1,使用鼠标选中前面浅灰色缩进. 2,Ctrl+H 查找替换 点击 Find All 查找全部缩进. 3,按backspace向后删除两次,如下图所示: 4,向下按一次方向键,再向左按一次方向键,最 ...
- CSS 选择器的兼容性
参考网站 http://blog.csdn.net/yume_sola/article/details/70215695 http://www.youdiancms.com/jianrong/614. ...
- IE各版本CSS Hack(兼容性处理)语法速查表
为了兼容IE各个版本,需要在CSS中添加额外的代码,比如以前常用的_width.之所以工作,是因为浏览器会忽略不能解析的样式规则,因此举个例子来说,把_width写在width下面,对于非IE浏览器会 ...
- 巧用css提高浏览器兼容性
body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea,p{ margin:0px; padding:0px; font-si ...
- css+js实现兼容性select的样式
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...
随机推荐
- 20165213 Exp6 信息搜集与漏洞扫描
信息搜集与漏洞扫描 一. 实践内容 (1)各种搜索技巧的应用 利用Google Hacking Datebase搜索. 尝试搜索http相关的漏洞,可以看到漏洞的相关信息. 也可以使用过滤器进行过滤, ...
- 卸载阿里云盾(安骑士)监控&屏蔽云盾IP
卸载阿里云盾监控 wget http://update.aegis.aliyun.com/download/uninstall.sh chmod +x uninstall.sh ./uninstall ...
- leetcode324 摆动排序II
1. 首先考虑排序后交替插入 首尾交替插入,这种方法对于有重复数字的数组不可行: class Solution { public: void wiggleSort(vector<int> ...
- PreparedStatement执行sql語句
import com.loaderman.util.JdbcUtil; import java.sql.Connection; import java.sql.PreparedStatement; i ...
- IEDA 实现自动生成序列化号(serialVersionUID)
完整操作流程:Setting->Editor->Inspections->Java->Serialization issues->Serializable class w ...
- python web开发flask框架 安装与环境
# encoding:utf-8 # 从flask这个框架中导入Flask这个类 from flask import Flask # 初始化一个Flask对象 # Flasks() # 需要传递一个参 ...
- xaml中显示 “大括号左边” 文本
Content="{}{" 最合适的还是上面的写法 转义符{不好使的 要么 空格{ 要么 全角{ 要么binding
- if、elif 条件判断
#!/usr/bin/python #-*- codinig: UTF-8 -*- from __future__ import print_function import os, sys, stat ...
- ceph添加/删除OSD
一.添加osd: 当前ceph集群中有如下osd,现在准备新添加osd: (1)选择一个osd节点,添加好新的硬盘: (2)显示osd节点中的硬盘,并重置新的osd硬盘: 列出节点磁盘:ceph-de ...
- PHP 註解規則使用方式
/** * 函數名稱 * 函數描述(有些會含HTML代碼) * * @access 變數可存取的權限 (Example: Public or Private) * @api 爲第三方來源的變數 * @ ...