欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！
CSS手册 CSS3手册 CSS论坛 CSS培训 CSS任务 网闻
DIVCSS5培训 系统快速学会CSS布局技术！
DIVCSS5首页 > CSS入门 >

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

以下是CSS5收集收拾整顿的div css hack兼容与兼容代码。

一. 简介

这篇文章包括了8个极为有用的意图门径, 在发展css设计碰到问题时你就会用到它们.

二. 针对涉猎器的选择器

这些选择器在你重要针对某款阅读器进行css设计时将颇为有用.

IE6及其更低版本



    
	
  1. 
		* html {} 
    2. 




	IE7及其更低版本




    
	
  1. 
		*:first-child+html {} * html {} 
    2. 




	仅针对IE7




    
	
  1. 
		*:first-child+html {} 
    2. 




	IE7和现代涉猎器




    
	
  1. 
		html>body{} 
    2. 




	仅现代涉猎器(IE7不实用)




    
	
  1. 
		html>/**/body{} 
    2. 




	Opera9及其更低版本




    
	
  1. 
		html:first-child {} 
    2. 




	Safari




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




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




    
	
  1. 
		#content-box {width:300px;height:150px;} 
    2. 
	
  2. 
		* html 
    3. 
	
  3. 
		#content-box {width: 250px; }  /* overrides the above style and changes the width to 250px in IE 6 and below */ 
    4. 




	三. 让IE6支持PNG通明



	一个IE6的Bug引起了海洛因烦, 他不支持透亮的PNG图片.(css实现ie6 png图片无色)



	你紧要应用一个css滤镜




    
	
  1. 
		*html #image-style {bac千克round-image: none; 
    2. 
	
  2. 
		filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil 
    3. 
	
  3. 
		ename.png", sizingMethod="scale");} 
    4. 




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



	FireFox下,当你点击一个超链接时可能在外围呈现一个虚线轮廓. 这很容易管理, 只须要在标签技俩中介入 outline:none .




    
	
  1. 
		a{outline: none;} 
    2. 




	五. 给行内元素界说宽度



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




    
	
  1. 
		span { width: 150px; display: block } 
    2. 




	六. 让固定宽度的页面居中



	为了让页面在涉猎器居中体现, 重要相对定位外层div, 而后把margin设置装备摆设为auto.




    
	
  1. 
		#wrapper {margin: auto;position: relative;} 
    2. 




	七. 图片革新技能



	用翰墨总比用图片做问题好一些. 笔墨对屏幕阅读机和SEO但凡极为朋侪的.



	HTML:




    
	
  1. 
		<h1><span>Main heading one</span></h1>
    2. 




	CSS:




    
	
  1. 
		h1 { background:url(heading-image.gif) no-repeat; } 
    2. 
	
  2. 
		h1 span {position:absolute;text-indent:-5000px;} 
    3. 




	你可以看到我们对题目使用了标准的<h1>作为标签何况用css来将文本替换为图片. text-indent属性将笔墨推到了涉猎器左边5000px处, 这样对付浏览者来说就看不见了.



	关掉css,日后看看头部会是甚么样子容貌的.



	八. 最小宽度



	IE6另外一个bug就是它不支持 min-width 属性. min-width又是相当有用的, 特别是对于弹性模板来说, 它们有一个100%的宽度,min-width 可以讲演阅读器什么时刻就不要再压缩宽度了.



	除IE6之外全数的浏览器你只必要一个 min-width: Xpx; 好比:




    
	
  1. 
		.container {min-width:300px;} 
    2. 




	为了让他在IE6下工作, 咱们须要一些特别的工作. 开始的时候我们需要建树两个div, 一个网罗另外一个:




    
	
  1. 
		<div class="container">
    2. 
	
  2. 
		    <div class="holder">Content</div>
    3. 
	
  3. 
		</div>
    4. 




	往后你需要界说外层div的min-width属性




    
	
  1. 
		.container {min-width:300px;} 
    2. 




	这时该是IE hack大显材干的时辰了. 你紧要搜罗下列的代码:




    
	
  1. 
		* html .container {border-right: 300px solid #FFF;} 
    2. 
	
  2. 
		* html .holder {display: inline-block;position: relative;margin-right: -300px;} 
    3. 




	跟着涉猎器窗口大小的外层div宽度低沉，以适应直到它放大到了边框的宽度，此时它不会进一步萎缩的。持有人DIV跟风，也终止萎缩。外层的div边框宽度成为内div的最小宽度。



	九. 隐藏水平转折条



	为了提防呈现水准滚动条, 在body里问鼎 overflow-x:hidden .




    
	
  1. 
		body { overflow-x: hidden; } 
    2. 




	当你选择应用一个比涉猎器窗口大的图片大约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来对父级做一次界说，那末即可以意图这个问题。 截字省略号 select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } 这个是在越出长度后会自行的截掉多出有部分的文字，并以省略号着末，很好的一个技术手段。只不过目前Firefox的确不支持。 只有Opera辨认 @media all and (min-width: 0px){ select {……} } 针对Opera阅读器做径自的设定。 以上但凡写CSS中的一些HACK，这些凡是用来经管局部的兼容性问题，假定希望把兼容性的模式也羁縻出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中经由过程过滤器导入特别的花样，有了的是写在HTML中的经过条件来链接或是导入须要的补钉技俩。



	IE5.x的过滤器，只有IE5.x可见 @media tty { i{content:"\";/*" "*/}} @import ''ie5win.css''; /*";} }/* */ IE5/MAC的过滤器，通常用不着 /*\*//*/ @import "ie5mac.css"; /**/ IE的if条件Hack Only IE  悉数的IE可辨认



	只有IE5.0可以识别 Only IE 5.0+  IE5.0包换IE5.5均可以辨认



	仅IE6可辨认 Only IE 6/+  IE6以及IE6以下的IE5.x都可辨认 Only IE 7/-  仅IE7可识别 以上形式可能并不周全，欢送大家能和我一块儿把这些技巧都汇总起来，为以后工作的盘考供给一个利便，同时在这里感谢感动那些钻研出这些HACK的作者们。


     
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/rumen/r52876.shtml

						

						
						

							
						

						

							

								
必备CSS教程Essential CSS Tutorials

							

							

								
							

						

						

							

								
必备HTML基础教程Essential HTML Tutorials

							

							

								
							

						

					

				

				

					

						

							
最新文章 NEWS

						

						

							
						

					

					

						

							
CSS 特效 CSS EFFECTS

						

						

							
						

					

					

						

							
相关文章 RELATED

						

						

							
						

					

					

						

							
热点文章 HOT