标签归档:hack

ie6/ie7/ie8/ie9/ie10+和firefox和google chrome等一票浏览器hack方式整理

看标题就可以感觉到随着浏览器家族的不断膨胀,随之而来的前端开发兼容处理也貌似愈加复杂,嗯!貌似愈加复杂,其实整理一下也只是换汤不换药,今天整理两套hack方式,个人喜欢第二种,但是要先介绍第一种。

一.嵌入式hack方式(不推荐)

所谓嵌入式hack就是最早被人们所使用的方式,在此只整理ie的hack,其余一票高级浏览器同入口式hack方式

_width: 100px;     /ie6/
*+width: 100px;    /ie7/
*width: 100px      /ie6、ie7/
width: 100px;    /ie8/
width: 100px\9;    /ie6、ie7、ie8/
/* 由于本人不喜欢这种hack所以没有继续测试ie9+浏览器hack */

二.入口式hack方式(推荐)

优点,入口处控制,各个浏览器hack代码耦合性低,便于维护,说白了就是看着舒服,想看实例就看0101后花园首页源代码

首先在源代码中将原有的<html>进行如下替换:

<!--[if lt IE 7 ]><html class="ie ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->

然后css代码如下,我想你一看就能理解,不做解释

.box {
    background-color: white;    /所有浏览器/
} 
.ie6 .box {
    background-color: brown;    /ie6浏览器/
}
.ie7 .box {
    background-color: green;    /ie7浏览器/
}
.ie8 .box {
    background-color: blue;     /ie8浏览器/
}
.ie9 .box {
    background-color: pink;     /ie9浏览器/
}
.ie .box {
    background-color: #CAF4ED; /所有ie浏览器/
}
@media all and (min-width:0) {
    background-color: black;   /非ie6、7、8的其余高级浏览器/
}
@media all and (-webkit-min-device-pixel-ratio:0) {
    background-color: red;     /Google Chrome、Safari等一票webkit内核浏览器/
}

入口式hack方式的优雅想必大家已经领会了吧^-^Y

 

不确定尺寸图片及多行文字实现垂直居中和水平居中

本方法思路源自淘宝UED博客,略做改动,同时拓展到多行文字的垂直居中

css代码:

.box {
    width: 400px; 
    height: 400px; 
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #eee; 
    /* hack for ie */ 
    *float: left;
    *display: block;
    *font-size: 350px; 
    /* end */ 
} 
.box img { 
    *vertical-align: middle; 
}
.box span {
    *vertical-align: middle;
    font-size: 12px;
    line-height: 16px;
}

html代码:

<div class="box"> 
    <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /> 
</div>
<div class="box">
    <span>我爱北京天安门,天安门上太阳升,伟大领袖毛主席,指引我们向前进,我爱北京天安门,天安门上太阳升,伟大领袖毛主席,指引我们向前进</span>
</div>

效果图:

图片垂直居中

注:

  1. 由于在高级浏览器下按display:table-cell;解析,所以外层div会以行级标签展示,所以在ie hack中添加*float:left;以在IE中实现相同效果
  2. 其中在IE下以font-size做为hack方式,其中height与*font-size的比为8/7,约等于1.14
  3. 针对多行文字垂直居中需要为内标签定义font-sizeline-height属性