DIV CSS HACK和浏览器兼容解决办法整理收集

2019-09-07 郑州网站建设  

IE7及其更低版本

*:first-child+html {} * html {} 

仅针对IE7

*:first-child+html {} 

IE7与现代涉猎器

html>body{} 

仅古代浏览器(IE7不合用)

html>/**/body{} 

Opera9及其更低版本

html:first-child {} 

Safari

html[xmlns*=""] body:last-child {} 

要应用这些选择器,请将它们放在样式夙昔. 譬如:

#content-box {width:300px;height:150px;} 

* html 

#content-box {width: 250px; }  /* overrides the above style and changes the width to 250px in IE 6 and below */ 

三. 让IE6赞成PNG通明

一个IE6的Bug惹起了大贫穷, 他不赞成透亮的PNG图片.(css完成ie6 png图片通明)

你需求应用一个css滤镜

*html #image-style {bac千克round-image: none; 

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil 

ename.png", sizingMethod="scale");} 

四. 移除超链接的虚线(仅对FF有用)

FireFox下,当你点击一个超链接时可在焦点涌现一个虚线外观. 这很容易设计, 只要要在标签款式中插足 outline:none .

a{outline: none;} 

五. 给行内元素定义宽度

假设你给一个行内元素界说宽度,那么它只不过在IE6下有效. 全体的HTML元素要么是行内元素要末就好是块元素. 行内元素包括: <span>, <a>, <strong> 和 <em>. 块元素包括<div>, <p>, <h1>, <form>与<li> . 你不能界说行内元素的宽度, 为了规画这个问题你可以将行内元素转酿成块元素.

span { width: 150px; display: block } 

六. 让静止宽度的页面居中

为了让页面在浏览器居中展现, 重要相对定位外层div, 接下来把margin配置为auto.

#wrapper {margin: auto;position: relative;} 

七. 图片替换技艺

用文字总比用图片做标题问题好一些. 笔墨对屏幕阅读机和网站优化都优劣常朋友的.

HTML:

<h1><span>Main heading one</span></h1>

CSS:

h1 { background:url(heading-image.gif) no-repeat; } 

h1 span {position:absolute;text-indent:-5000px;} 

你可以看到咱们对标题问题使用了标准的<h1>作为标签并且用css来将文本改换为图片. text-indent属性将笔墨推到了涉猎器右侧5000px处, 多么对付阅读者来说就看不见了.

关掉css,而后看识破部会是甚么容貌的.

八. 最小宽度

IE6另外一个裂缝便是它不支持 min-width 属性. min-width又是至关有用的, 非常是对于弹性源码来讲, 它们有一个100%的宽度,min-width 可以申报阅读器何时就不要再压缩宽度了.

除IE6之外一切的阅读器你只紧要一个 min-width: Xpx; 比喻:

.container {min-width:300px;} 

为了让他在IE6下工作, 咱们必要一些非常的工作. 最先的时分我们须要确立两个div, 一个涵概另外一个:

<div class="container">

    <div class="holder">Content</div>

</div>

今后你必要定义外层div的min-width属性

.container {min-width:300px;} 

这时该是IE hack大显威力的时辰了. 你需要囊括下列的代码:

* html .container {border-right: 300px solid #FFF;} 

* html .holder {display: inline-block;position: relative;margin-right: -300px;} 

随着涉猎器窗口大小的外层div宽度高涨,以顺应直到它放大到了边框的宽度,此时它不会进一步萎缩的。持有人DIV跟风,也住手萎缩。外层的div边框宽度成为内div的最小宽度。

九. 隐藏水平迁移变动条

为了提防涌现水平转折条, 在body里参预 overflow-x:hidden .

body { overflow-x: hidden; } 

当你选择运用一个比浏览器窗口大的图片可以或许flash时, 这个技巧将尤其有用

樊篱IE浏览器(也便是IE下不显示) *:lang(zh) select {font:12px !important;} /*FF,OP可见,非常提示:因为Opera近来的晋级,今朝此句只为FF所辨认*/ select:empty {font:12px !important;} /*safari可见*/ 这里select是选择符,依照状况更换。第二句是MAC上safari浏览器独占的。 仅IE7与IE5.0可以识别 *+html select {…} 背地里临须要只针对IE7与IE5.0做技俩的时分就能接纳这个HACK。 仅IE7可以识别 *+html select {…!important;} 暗地里临需要只针对IE7做花色的时刻便可以接纳这个HACK。 IE6及IE6以下辨认 * html select {…} 这个地方要非常当心得多博客都写成了是IE6的HACK的确IE5.x一样可以辨认这个HACK。其它浏览器不辨认。 html/**/ >body select {…} 这句与上一句的感召近似。 仅IE6不辨认,樊篱IE6 select { display /*樊篱IE6*/:none;} 这里主要是通过CSS表述兼并一个属性与值,表达在冒号前。 仅IE6与IE5不辨认,屏蔽IE6与IE5 select/**/ { display /*IE6,IE5不识别*/:none;} 这里与上面一句不同的是在选择符与花括号之间多了一个CSS注解。不樊篱IE5.5 仅IE5不辨认,樊篱IE5 select/*IE5不识别*/ {…} 这一句是在上一句中去掉了属性区的正文。只有IE5不辨认,IE5.5可以识别。 盒模型计划门径 selct {width:IE5.x宽度; voice-family :"\"}\""; voice-family:inherit; width:准确宽度;} 盒模型的革除方式不是经由!important来处理的。这点要体会。 肃除浮动 select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} 在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个肃清浮动的HACK来对父级做一次界说,那末即可以筹划这个问题。


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1109.html转载请标明出处,谢谢合作!
标签:
  • DIV
  • css
  • 方法
  • 解决
  • 浏览器
  • 兼容
  • 整理
  • HACK