您的位置:晶晶的博客>前端>Css的Hack、设计技巧汇总

Css的Hack、设计技巧汇总

屏蔽IE浏览器(也就是IE下不显示) 

*:lang(zh) select {font:12px !important;} select:empty {font:12px !important;} 这 里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。

仅IE7与IE5.0可以识别

*+html select {…} 当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。

这个hack目前来说,ie5系列基本已经绝迹,那么可以认为这个hack是IE7专有,当然,纯粹理论上是不能这么说的,只是在设计前端你的时候可以用这种写法专门为IE7书写样式。

IE6及IE6以下识别 

* html select {…} 这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同 样可以识别这个HACK。其它浏览器不识别。html >body select {…} 这句与上一句的作用相同。

IE6.0修正重复文字bug

这个bug之前也有过讨论。

复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法,有些是完美的,但是做一些反复试验也是必须的: 

 ◆确保所有的元素使用”display:inline;”

 ◆在最后一个元素上使用一个”margin-right:-3px;” 

为浮动元素的最后一个条目使用一个条件注释,比如:<!--–[if !IE]-->Put your commentary in here…<!--[endif]–--> 在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)

概要总结一下:

IE6 专用 _height: 100px;

IE6 专用 *height: 100px;

IE7 专用 *+height: 100px;

IE7、FF 共用 height: 100px !important;

区块垂直居中的问题

居中问题.兼容代码:兼容最推荐的模式

/* FF */

.submitbutton {

    float:left;

    width: 40px;

    height: 57px;

    margin-top: 24px;

    margin-right: 12px;

}

/* IE6 */

*html .submitbutton {

    margin-top: 21px;

}

/* IE7 */

*+html .submitbutton {

margin-top: 21px;

}

图片水平垂直居中于DIV,图片未知宽高[来至大前端]

HTML

<div class=”demo”><a href=""><img src="...." /></a></div>

CSS

/*For Firefox Chrome*/

.demo{border:1px #ddd solid;width:208px;height:148px;overflow:hidden;text-align:center;display:table;float:left;margin:50px;position:relative;}

.demo a{display:table-cell;vertical-align:middle;width:200px;height:140px;}

.demo a img{border:1px #ddd solid;margin:0 auto;max-width:200px;max-height:140px;}

/*For IE7*/

*+html .demo a{position:absolute;top:50%;width:100%;text-align:center;height:auto;}

*+html .demo a img{position:relative;top:-50%;left:-50%;}

/*For IE6*/

*html .demo a{position:absolute;top:51%;width:100%;text-align:center;height:auto;display:block;}

*html .demo a img{position:relative;top:-50%;left:-50%;width:expression(this.width>200?"200px":"auto");height:expression(this.height>140?"140px":"auto");}

DIV浮动IE文本产生3象素的bug

#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>

转载请注明本文标题和链接:《Css的Hack、设计技巧汇总

相关推荐

网友评论1

路人甲 表情
Ctrl+Enter快速提交
  1. #1

    你的想法,在很多场合下都可以应用。

    早泄汤 4年前 (2013-07-03) 回复