固定浮动窗positioin:fixed浏览器(IE6 IE7 IE8 IE9 Chrome Firfox)兼容性解决方案

最新推荐文章于 2021-06-17 23:02:28 发布
最新推荐文章于 2021-06-17 23:02:28 发布
阅读量191 收藏
点赞数
文章标签： xhtml

固定浮动窗就是固定在浏览器某个位置，不随滚动条而变动的窗体。

先贴代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
#fixed{position:fixed;top:5em;right:0;}
</style>
<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden;}
body{height:100%;overflow:auto;}
#fixed{position:absolute;right:30px;top:expression(eval(document.body.scrollTop + 50));}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
fjkdfj<br/>
</div>
<div id="fixed"><h2>{position:fixed}</h2></div>
</body>
</html>

简单解析：

对于firfox,chrome或者IE8、9等，使用

{position:fixed;top:5em;right:0;}
就可以直接搞定，其中可用left、right、top、bottom指定位置，随意一个横向的(left或者right)和一个纵向的(top或者bottom)就可以确定位置，就像数学中的x、y坐标就可确定一个点一样。

对于IE6等就得使用额外的

html{overflow:hidden;}
body{height:100%;overflow:auto;}
#fixed{position:absolute;right:30px;top:expression(eval(document.body.scrollTop + 50));}

这些是放在 
<!--><!-->之间的

IE不会把它当做注释符，所以会定义新的#fixed，覆盖先前的，并且这样的css只在IE下可用，其他浏览器不识别，巧的是其他浏览器又把

<!--><!-->

当做注释符，就不会解析里面的css。从而达到兼容的目的。其中 
<!--[if IE 6]>
...
<![endif]-->

是一种语法，哪位高手可以指点下 
 

 

 

 

 
 
  


                

        

        




    




    

      

        

            

              
                
                  iteye_10993
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
一个兼容IE、Chrome和Firfox的HTML固定表头例子

				
			

			

				

					03-28
				

			

		

		

			
				
NULL 博文链接：https://sheng.iteye.com/blog/1199433

			
		

	



                

              
                



	

		

			

				
					
判断当前使用的浏览器版本ie、firfox等

				
			

			

				

					03-13
				

			

		

		

			
				
用于判断当前使用的浏览器以及版本，适用于IE、FIRFOX,不支持IE9

			
		

	



                


  
              

                


	

		

			

				
					
postionfixed固定_position的fixed属性使用   在浏览器中固定位置

				
			

			

				

					weixin_36051064的博客
				

				

					12-23
					
					338
					
				

			

		

		

			
				
关于fixed属性，在什么情况下需要用，怎么用，首先，我们应该先了解下fixed属性的说明：fixed总是以body为定位时的对象，总是根据浏览器的窗口来进行元素的定位，通过"left"、"top"、 "right"、 "bottom" 属性进行定位。那么，我们了解了fixed属性的说明后，就可以知道它的作用了。当我们需要使一个层相对于浏览器来自动调整该层的位置的时候，如果你使用position的...

			
		

	





	

		

			

				
					
IE 8兼容：<meta http-equiv="X-UA-Compatible" content="IE=edge" /> X-UA-Compatible的解释

				
			

			

				

					weixin_33881140的博客
				

				

					09-06
					
					87
					
				

			

		

		

			
				
　　前言：9月份开始了，大四也真正的到来了。深知自己网页布局还有很大的缺陷，接下来打算从工作中抽时间出来模仿着一些互联网公司的网站。顺便把基础理论知识打好。
　　第一个目标：小米官网；后续会把练习的项目放到github上。
　　平常自己写代码不是很规范，网页最基础的架构<html></html>一般用的就是DW生成的页面文件。前不久经老大调教，就改用了H5的框架结构。之...

			
		

	



		

			
		



	

		

			

				
					
html5 js插件兼容ie8,jquery.popup.js-兼容IE8的简单jQuery模态窗口插件

				
			

			

				

					weixin_42305992的博客
				

				

					06-17
					
					381
					
				

			

		

		

			
				
jquery.popup.js是一款简单的兼容IE8浏览器的jQuery模态窗口插件。该模态窗口插件没有过多的参数，通过简单的调用就可以生成带动画过渡效果的模态窗口，非常简洁。使用方法下载压缩包，在页面中引入jQuery和jquery.popup.js文件。HTML结构该模态窗口的基本HTML结构为：创建一个全屏的遮罩层。....在遮罩层内放置模态窗口的内容，以及一个关闭模态窗口的按钮。这是第一个...

			
		

	





	

		

			

				
					
让 IE < 7 支持 position:fixed 的通用方法

				
			

			

				

					桂林哈秋 - 我想学编程
				

				

					06-23
					
					905
					
				

			

		

		

			
				
原文：http://blog.istef.info/2008/04/13/css-position-fixed-for-ie6/在 Firefox/Opera 等良好支持 W3C 标准的浏览器中，如果我们希望将某个元素固定在页面底部，我们可以给它指派这样的 CSS：position: fixed;bottom: 0;对于 IE7 来说，它虽然可以正确的将这个元素 fix 在

			
		

	





	

		

			

				
					
兼容ie中fixed

				
			

			

				

					weixin_34006468的博客
				

				

					04-20
					
					71
					
				

			

		

		

			
				
 

.publish{
    width:27px;
    height:131px;
    background:url(publish.png) no-repeat;
    cursor:pointer;
    position:fixed;
    top:180px;
    right:0;
    _position:absolute;
     _t...

			
		

	





	

		

			

				
					
前端设计IE6IE7IE8IE9FF问题汇总IE和FirFox兼容问题[参照].pdf

				
			

			

				

					10-13
				

			

		

		

			
				
前端设计IE6IE7IE8IE9FF问题汇总IE和FirFox兼容问题[参照].pdf

			
		

	





	

		

			

				
					
HttpWatch(支持firfox、IE)

				
			

			

				

					06-24
				

			

		

		

			
				
甚至可以显示浏览器缓存和IE之间的交换信息。集成在Internet Explorer工具栏。[1]只需要选择相应的网站，软件就可以对网站与IE之间的需求回复的通讯情况进行分析并在同一界面显示其相应日志记录。每一个HTTP记录都...

			
		

	





	

		

			

				
					
一款轻量、无依赖的 相同 name 的表单验证，动态验证，兼容 chrome 、firfox 、IE9 +的JavaScript

				
			

			

				

					05-16
				

			

		

		

			
				
一款轻量、无依赖的 相同 name 的表单验证，动态验证，兼容 chrome 、firfox 、IE9 +的JavaScript 验证组件

			
		

	





	

		

			

				
					
ie6,ie7,ie8完美支持position:fixed的终极解决方案

				
			

			

				

					10-25
				

			

		

		

			
				
ie6对position:fixed不支持，网上有很多解决方法，有的在ie6,ie7上调试成功后，在ie8上又不好使，div层还是跟随滚动条浮 动；以下总结方法，在ie6,ie7,ie8上都调试成功，且页面滚动条滚动时，效果还挺好，div层并不会闪烁。

			
		

	





	

		

			

				
					
IE6 IE7(Q) IE8(Q) 不支持固定定位（position:fixed）

				
			

			

				

					weixin_30526593的博客
				

				

					03-08
					
					102
					
				

			

		

		

			
				
标准参考
根据 W3C CSS2.1 规范中的描述，position:fixed 固定定位是绝对定位的子类。与绝对定位不同的是，固定定位的包含块由视口（viewport）创建的。
'position' 特性的 fixed 值允许一个元素绝对的相对于浏览器窗口定位。
关于 'position:fixed' 的详细信息，请参考 CSS 2.1 规范 9.6.1 Fixed positioning...

			
		

	





	

		

			

				
					
[if IE 6]>与<![endif] 

				
			

			

				

					yong718100的专栏
				

				

					10-08
					
					248
					
				

			

		

		

			
				

------------------------------------------------------------------
< !--[if lte IE 6]> ……< ![endif]-->
< !--[if lte IE 6]> ……< ![endif]-->
Ite：less than or equal to意思是小于或等于IE6浏览器，用于IE浏览器的条件注释，常用于...

			
		

	





	

		

			

				
					
父overflow子fixed IE兼容性问题

				
			

			

				

					onemango的博客
				

				

					04-23
					
					297
					
				

			

		

		

			
				
在写项目问题中，遇到一个IE11浏览器兼容问题：
父overflow: hidden;子position: fixed;，子溢出父的部分不显示
代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ie兼容性测试</titl...

			
		

	





	

		

			

				
					
IE8 不支持 position:fixed 的简单解决办法

				
			

			

				

					xuanjiewu的专栏
				

				

					09-28
					
					5834
					
				

			

		

		

			
				
今天发现使用 position:fixed 的页面在firefox下没有问题，在IE8下却不能正常显示，在网上找了找，有不少相关文章，但是不是不起作用就是太复杂，后来终于发现一个简单的解决办法，就是在html的开头加上 ：
 
就可以了，后来搜了搜，发现 HTML 4.0 Transitional 和 XHTML 1.0 Transitional  的布局确实有不少差异，可以参见这里： 



			
		

	





	

		

			

				
					
解决IE6浏览器下position:fixed固定定位问题

				
			

			

				

					我的地盘
				

				

					02-28
					
					1198
					
				

			

		

		

			
				
像你所遇到的问题一样， IE6浏览器有太多的bug让制作网页的人头疼。这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法。如果我们需要做某个元素始终位于浏览器的底部，不会因为浏览器窗口的缩放和滚动条的滚动而变化，那个肯定是想到的用position:fixed生成绝对定位，只要设置这个CSS属性就能达到刚刚的需求。当其他浏览器都正常显示的时候，只有IE6不那么完美。

			
		

	





	

		

			

				
					
IE 6~8 position:fixed 不兼容解决方法

				
			

			

				

					eno的博客
				

				

					07-20
					
					1890
					
				

			

		

		

			
				

  IE8及以下版本对position: fixed 是不支持的 
  所以当你需要页面需要用到固定定位，同时有要兼容IE时 
  可以这样写固定定位


先给其他浏览器写定位

.fixed{ 
    position:fixed; 
    /*固定在浏览器左上角*/
    top:0;
    left: 0;
    width:100px; 
    height:100px; 
...

			
		

	





	

		

			

				
					
position:fixed 在ie8下的兼容性处理(附带ie8以下不透明度兼容)

				
			

			

				

					lihaofeifei的博客
				

				

					09-19
					
					2119
					
				

			

		

		

			
				
1、解决fixed兼容性核心代码：


.ie{
            _position: absolute;
            _clear: both;
            _top:expression(eval(document.compatMode &amp;&amp;
               document.compatMode=='CSS1Compat') ?
...

			
		

	





	

		

			

				
					
小技巧css解决移动端ios不兼容position:fixed属性，无需插件

					
热门推荐

				
			

			

				

					小白努力走
				

				

					10-15
					
					15万+
					
				

			

		

		

			
				
ios运用position:fixed会错位，css一行样式巧妙解决定位问题。

			
		

	





	

		

			

				
					
robot 使用firfox浏览器，报错init() got an unexpected keyword argument 'firefox_profile'

					
最新发布

				
			

			

				

					07-16
				

			

		

		

			
				
要在Robot Framework中使用Firefox浏览器，你需要安装Selenium库的Firefox驱动程序，并确保你使用的是兼容的版本。  然后，你可以在Robot Framework的测试用例中使用关键字`Open Browser`来打开Firefox浏览器。在这...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值