CSS HACK 及常见问题
一、CSS常用hack
1.方式一:条件注释法
这种方式是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式。举例如下
只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]--> 只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]--> 只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]--> 只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]--> 非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->
2.方式二:类内属性前缀法
常见的前缀符号:*(ie 7/6) +(ie 7) _(ie 6)
常见的后缀符号:\0(ie 8/9/10) \9\0( ie 9/10) !important(只有ie6不识别)
<div class="div1"></div>
div{height:500px;}
/*请注意以下代码顺序不能有错,否则效果会出错*/
.div1{
background-color:red\0; /* ie 8/9/10 */
background-color:blue\9\0; /* ie 9/10*/
*background-color:yellow; /* ie 7/6*/
_background-color:gray; /* ie 6*/
}
/*特地为IE10写的样式效果*/
.ie10 .div1{
background:#000;
color:#fff;
}
二、常见兼容技巧
1.在公共样式中把body,ul,form等标签样式reset,可以避免很多不必要的问题。
2. 居中问题.
1).垂直居中.
将line-height 设置为当前div相同的高度,再通过vertical-align: middle.( 注意内容不要换行.)
2).水平居中.
margin: 0 auto;(当然不是万能)
你可以把html的body之内任何项目置于中,该项目将自动获得相等的左右边界值从而保证了居中显示。不过,这在IE6
之前版本的浏览器中仍然有问题,将不会居中,因此必须
修改如下:
body { text-align: center; } #content { text-align: left; width: 700px; margin: 0 auto; }
对body的设定将导致主体内容居中,但是连所有的文字也居中了,这恐怕不是你想要的效果,为此#content 的div还要指定一个值:text-align: left
3.cursor: pointer 可以同时在IE FF 中显示游标手指状,hand 仅IE 可以
4.如果文字过长,则将过长的部分变成省略号显示:IE5,FF无效,但可以隐藏,IE6有效<DIV STYLE=“width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”> <NOBR>就是比如有一行文字,很长,表格内一行显示不下。Phontol.com</NOBR> 固定宽度汉字截断:overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不过只能处理文字在一行上的截断,不能处理多行。)(IE5以上)FF不能,它只隐藏。
5.IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。
比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:
#box{
width: 80px;
height: 35px;
}
html>body #box{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}
6.浮动ie产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} 这里细说一下block与inline两个元素:block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素); #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;
7.为什么FF下文本无法撑开容器的高度
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min- height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:
{
height:auto!important;
height:200px;
min-height:200px;
}
8.清除浮动
.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;} 或者加入:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏览器支持, 所 以并不影响到IE/WIN浏览器。这种的最麻烦的......
#box:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
9.DIV浮动 IE文本产生3象素的bug
左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.
#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键 }
HTML代码
<div id="box"> <div id="left"></div> <div id="right"></div></div>
10.属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
11.IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。
解决办法:对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。
12.高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin 或paddign 时。
例:<div id="box"> <p>p对象中的内容</p> </div>
CSS:
#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解决方法:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或者为DIV加上border属性。
12.FF 支持!important, IE 则忽略, 可用!important 为FF 特别设置样式
CSS HACK 及常见问题的更多相关文章
- CSS Hack技术介绍及常用的Hack技巧集锦
一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...
- CSS Hack
CSS HACK,网上有很多,主要是IE版本不同造成的,尽量不要用CSS HACK,实在调不过去可以用一用,相信以后随着IE低版本的淘汰,CSS HACK也将不在使用. 类内部HACK IE6识别 - ...
- css3复杂选择器+内容生成+Css Hack
1.复杂选择器2.内容生成3.多列4.CSS Hack(浏览器兼容性)=======================================1.复杂选择器 1.兄弟选择器 1.特点: 1.通过 ...
- CSS Hack解决浏览器IE部分属性兼容性问题
1.Css Hack 不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持.解析不一样,导致在不同浏览器的环境中呈现出不 ...
- IE9下css hack写法
ie9一出css hack也该更新,以前一直没关注,今天在内部参考群mxclion分享了IE9的css hack,拿出来也分享一下: select { background-color:red\0; ...
- 【荐】说说CSS Hack 和向后兼容
人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了.增长总是快于消亡导致了浏览器兼容是成了谈不完的话题.说 到浏览器兼容,CSS HACK自然而然地被我们想起.今 ...
- IE 6 ~ 9 CSS Hack 写法总结
IE 6 ~ 9 CSS Hack 写法总结 24th 四, 14 lip2up [code lang="css"]_color: red; /* ie6 */*color: ...
- [转]CSS hack大全&详解
转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...
- 聊聊css hack
什么是CSS hack CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如 ...
随机推荐
- CSS 冲击波(水波纹)效果
<span style="font-size:18px;"><!DOCTYPE html> <html> <head> <me ...
- 【原】对频率论(Frequentist)方法和贝叶斯方法(Bayesian Methods)的一个总结
注: 本文是对<IPython Interactive Computing and Visualization Cookbook>一书中第七章[Introduction to statis ...
- 菜鸟学习WCF笔记-Address
终结点是WCF最为核心的对象,因为它承载了所有通信功能.服务通过相应的终结点发布出来,客户端通过与之匹配的终结点对服务进行调用.终结点有地址.绑定和契约ABC三要素构成. Address 作为终结点 ...
- ftp如何预览图片 解决方案
下载使用 server-U ,开启 HTTP 服务,输入 http://ip:端口 后,登录ftp账号密码,可选使用 基于java的应用 web client 或 FTP Voyager JV,来预览 ...
- Android 代码混淆、第三方平台加固加密、渠道分发 完整教程(图文)
第一步:代码混淆(注意引入的第三方jar) 在新版本的ADT创建项目时,混码的文件不再是proguard.cfg,而是project.properties和proguard-project.txt. ...
- 搭建自己的OpenWrt开发环境
1. 安装环境Linux系统,如果在CentOS上操作,需安装如下依赖包:yum install binutils bzip2 gawk gcc gcc-c++ gettext makencurse ...
- WPF下载远程文件,并显示进度条和百分比
WPF下载远程文件,并显示进度条和百分比 1.xaml <ProgressBar HorizontalAlignment="Left" Height="10&quo ...
- Navi.Soft30.开放平台.聚合.开发手册
1系统简介 1.1功能简述 现在是一个信息时代,并且正在高速发展.以前获取信息的途径非常少,可能只有电视台,收音机等有限的来源,而现在的途径数不胜数,如:QQ,微信,官方网站,个人网站等等 本开发手册 ...
- FMDB 版本迁移
FMDB 版本迁移 安装 1. 通过CocoaPods 在项目根目录创建并编辑 Podfile 内容如下 $ cd /path/to/MyProject $ touch Podfile $ edit ...
- 关于typedef的使用方法
在计算机编程语言中用来为复杂的声明定义简单的别名.与宏定义有些差异.它本身是一种存储类的keyword,与auto.extern.mutable.static.register等keyword不能出如 ...