应用从ie9迁移到ie11，css样式position：relative不可用解决方案

IE9到IE11 CSS兼容性调整
最新推荐文章于 2021-09-11 21:10:33 发布
原创 最新推荐文章于 2021-09-11 21:10:33 发布 · 4.5k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种解决HTML元素在IE9到IE11浏览器间CSS兼容性问题的方法。通过修改CSS属性如position和display，解决了特定布局在不同IE版本中表现不一致的问题。

问题描述

问题的现象和解决问题的方式看似毫不相关，请看：
向某个html元素追加子元素，$("#div").append(*****)，将实现代码从ie9迁移到ie11。 同一页面的button按钮，点击任意一个，所有button都会被禁用。

解决方案

ie11下position：relative生效，尝试添加float：left或display：block，我添加的是display：block。解决方案如下：

ie9环境，html标签和css样式代码

<span style="font-size:18px;"><pre name="code" class="html"><span class='stepname'>name</span></span>



<span style="font-size:18px;">.stepname{position: relative;line-height:7px;left: 22%;top:5px;color:#888;font-weight:bold;}</span>
ie11环境，html标签和css样式代码





<span style="font-size:18px;"><span class='stepname'>name</span></span>
.stepname{position: relative;line-height:7px;left: 22%;top:5px;color:#888;font-weight:bold;display: block;}


另外，ie11使用position：absolute，不会出现上述问题。


参照链接：https://bytes.com/topic/html-css/answers/532317-position-absolute-relative-container-bug

























                

        

    


  



    

      

        

            

              
                
                  sum__mer
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
body下面的relative元素，top百分比失效问题（已解决）

				
			

			

				

					weixin_42146720的博客
				

				

					12-18
					
					1399
					
				

			

		

		

			
				
CSS 绝对定位和相对定位

			
		

	



                

            
              



	

		

			

				
					
微信小程序 Skyline CSS 兼容性指南

					
最新发布

				
			

			

				

					ZhuBin365的博客
				

				

					08-21
					
					1584
					
				

			

		

		

			
				
Skyline 代表着与传统基于 WebView 的小程序渲染完全的架构转变。Skyline 于 2023 年 7 月随基础库 3.0.0 版本引入，通过实现专用的渲染线程架构，消除了 WebView 的单线程限制，解决了根本性的性能瓶颈。传统 WebView 架构运行在有问题的单线程模型上，其中 JS 逻辑、DOM 创建、CSS 解析、样式计算、布局和绘制都在争夺同一个线程资源。

			
		

	



              


  
              

                


	

		

			

				
					
ie8中 position:relative定义的层不能正常显示

				
			

			

				

					仰望者！
				

				

					03-10
					
					412
					
				

			

		

		

			
				
无意打开IETester在IE8下测试了一个页面，突然发现一个父级position:relative;子级position:absolute;的样式焦点轮播的时候在IE8下居然是错位的。仔细看了一下，发现IE8居然不认父级的相对定位，直接就是在屏幕上显示绝对定位。
在我的系统中IE6,IE7下显示正常，解决办法
将
&lt;meta http-equiv="Content-Type" con...

			
		

	





	

		

			

				
					
IE7 position:relative的问题

				
			

			

				

					12-02
				

			

		

		

			
				
回想在网上看过的一篇文档，大意就是，如果在IE7中使用position:relative属性，需要在该元素的容器上，同时给予position:relative属性。 
我给了。大按钮上的链接都恢复了。但是”css”"js”"seo”3个小按钮上没有链接。很诡异…… 又给了z-index属性，这下firefox彻底复原，但是IE7依旧。 
删了z-index，将3个浏览器的毛病都统一，然后，在群里喊了一嗓子。 “爱得”建议将容器的定位属性更改为position:absolute。 更换后重算了top的数值，IE6/7、FF测试成功。

			
		

	



		

			
		



	

		

			

				
					
关于ie 下css div position:relative;定位失效

				
			

			

				

					cms专家
				

				

					08-11
					
					8012
					
				

			

		

		

			
				
子元素中有position:relative;的时候 ，在ie下，会出现平铺整个页面。
遇到该问题，只需要给其父元素也增加position:relative;属性即可。
万恶的ie

			
		

	





	

		

			

				
					
relative定位在ie浏览器的兼容问题

				
			

			

				

					weixin_44886911的博客
				

				

					09-05
					
					465
					
				

			

		

		

			
				
通过position：relative定位元素，改变left值的方式实现一个手动轮播，发现在ie浏览器中不起作用。最后发现在IE浏览器中必须在样式中给left赋一个初始值，才可以改变left值，而其他浏览器不需要。

...

			
		

	





	

		

			

				
					
IE6中实现fixed头部定位的解决方案

				
			

			

				

					
				

			

		

		

			
				
从描述“轻松解决ie6下头部定位的问题，如果你还在为你的定位问题犯愁，就赶快下载资源看看吧”可以看出，该资源提供了一种便捷、可复用的解决方案，可能封装了成熟的代码片段或插件，帮助开发者快速集成并解决兼容...

			
		

	





	

		

			

				
					
ie6中解决z-index

				
			

			

				

					04-20
				

			

		

		

			
				
然而，IE6的实现并不完善，导致了一些常见的问题和解决方案。  首先，IE6只对设置了`position`属性（如`position: relative;`, `absolute;` 或 `fixed;`）的元素应用`z-index`。如果一个元素的`position`为默认的`...

			
		

	





	

		

			

				
					
Vue 3 迁移策略笔记—— 第30节：新增功能——Teleport

				
			

			

				

					Jay的博客
				

				

					04-18
					
					588
					
				

			

		

		

			
				
前言

本笔记主要基于官方文档《Vue 3 教程-Teleort》汇总而来。如有理解出入，请以官方文档为主。建议您以官方文档为主，本文为辅。这样您可以“以自己为主”审视的阅读，从而不被我的观点带偏。

什么是 Teleport ?

Teleport 是 Vue 3.x 新增自定义元素，借助 Teleport 可以控制 Teleport 内部的内容挂载到具体的元素中。

场景模拟
我们先看这样的一个场景

在一个多层嵌套的组件中，我们构建了一个模态框。我们想要这个模态框相对于最顶层的元素显示，该怎么做呢？


			
		

	





	

		

			

				
					
@set-color: #7c7c7c;
/deep/.ant-tree-child-tree.ant-tree-child-tree-open > li:first-child {
  padding-top: 4px;
}
.last-menu-line() {
  position: absolute;
  left: 12px;
  width: 1px;
  height: 100%;
  margin: 22px 0 0;
  border-left: 1px dotted @set-color;
  content: &#39; &#39;;
}
.ant-tree /deep/li {
  position: relative;
  &:before {
    position: absolute;
    left: 12px;
    width: 1px;
    height: 100%;
    height: calc(100% - 45px);
    margin: 22px 0 0;
    border-left: 1px dotted @set-color;
    content: &#39; &#39;;
  }
  .ant-tree-node-content-wrapper {
    padding: 0;
    width: 90%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .ant-tree-child-tree.ant-tree-child-tree-open > li {
    &::after {
      content: &#39;&#39;;
      position: absolute;
      width: 8px;
      height: 1px;
      border-top: 1px dotted @set-color;
      background: transparent;
      top: 15.5px;
      left: -5px;
      margin: 0;
    }
    .ant-tree-switcher-noop {
      height: 1px;
      border-top: 1px dotted @set-color;
      top: 11.5px;
      left: 4px;
      margin: 0;
      width: 18px;
      margin-right: 6px;
    }
  }
}换vue3 写法

				
			

			

				

					06-27
				

			

		

		

			
				
同上转换后的代码}</style>```这样，我们就完成了从Vue2到Vue3的深度选择器语法的迁移。在 Vue 3 中，`/deep/` 深度选择器已被弃用，需要改用 `::v-deep` 或 `:deep()` 语法。以下是转换后的 Vue 3 样式写法：  ```...

			
		

	





	

		

			

				
					
解决position:relative情况下，z-index无效的方法

				
			

			

				

					weixin_30379973的博客
				

				

					09-11
					
					915
					
				

			

		

		

			
				
在实际开发中，div+css经常会碰到层级的问题
其中有个很头痛的就是z-index控制层级时，老是发现z-index不起作用
老杨依据自己的经验，总结出以下步骤：
1、判断被覆盖的层（想要置顶的层）的postion是否也为relative或者absolute
2、如果1成立，则判断是否此层的z-index比误覆盖的层的z-index数值大
3、如果2成立，判断是否此层的父级元素比误...

			
		

	





	

		

			

				
					
IE  position:relative bug

				
			

			

				

					weixin_33809981的博客
				

				

					09-14
					
					112
					
				

			

		

		

			
				
转载http://www.cnblogs.com/lyk831216/archive/2009/09/01/1558074.html今天做项目遇到IE position:relative bug,找到一篇文章，随便翻译下，说明情况<div id="container">    <div id="a"></div>    <div id="b">&...

			
		

	





	

		

			

				
					
html 页面定位失效,html – CSS相对定位不起作用

				
			

			

				

					weixin_34231219的博客
				

				

					06-03
					
					489
					
				

			

		

		

			
				
出于某种原因,我无法将我的图像定位到Twitter Feed的右侧.我把它定位在twitter feed的DIV标签内,但它仍然在下面.这是实时链接：http://www.lymemd.org/indexmm6.php我的CSS：#twitterfeed {position: relative;}#drshow {position: relative;left: 200px;}我的HTML：dat...

			
		

	





	

		

			

				
					
"position:relative"在IE中的Bug

				
			

			

				

					hyj1254
				

				

					03-22
					
					222
					
				

			

		

		

			
				
请看下图：
[img]http://hyj1254.iteye.com/upload/picture/pic/57399/c9f3d2a0-0e31-3660-85fd-b872ca2c584d.jpg[/img]
即子元素过高导致父元素出现滚动条时，它并不会像预期的那样呆在父元素里，而是浮在父元素之上，并且位置不随滚动条的移动而改变。[color=blue]根源就是子元素的"position...

			
		

	





	

		

			

				
					
CSS3弹性布局怎么兼容IE（11）？

				
			

			

				

					highboys的博客
				

				

					12-01
					
					9927
					
				

			

		

		

			
				
弹性布局（Flexbox）确实为我们构建复杂、灵活的布局带来了很大的便利，但是它的兼容性确让人很头痛，下面是我遇到的一个问题：
理想效果：


IE11效果：


html大概结构：
	
		
		
	
	
这里大致说一下css，input-container宽高没设死，由input决定，并设置position: relative;相对定位，并采用display: flex;弹性布局

			
		

	





	

		

			

				
					
绝对定位right:0;无效_CSS定位属性Position实例分析

				
			

			

				

					weixin_34763548的博客
				

				

					01-28
					
					1016
					
				

			

		

		

			
				
CSS所提供的Position定位属性在进行网页页面布局过程中非常重要，通过使用Position定位属性可以实现对页面元素进行精确定位，最终达到较好的设计及页面展示效果。本文主要针对Position属性设计教学案例，实现教学。CSS学习教程Position定位属性Position定位属性为设计人员提供5类定位模式，分别为static静态定位、relative相对定位、absolute绝对定位、fi...

			
		

	





	

		

			

				
					
z-index失效的几种情况，父标签position属性为relative的时候,详解

					
热门推荐

				
			

			

				

					小嘟的博客
				

				

					09-11
					
					1万+
					
				

			

		

		

			
				
网上对这一方面解释的很多，我也不想把别人的都全抄过来。在这里我想的是加上我对这些情况的理解还有我的一些疑惑，若有问题，请留言，谢谢！！！话不多说，进入正题：
首先 z-index在何种情况下生效呢？

（1）首先Z-index 仅能在定位元素上奏效（也就是说要有position属性，再详细的说，它的值需要是relative、absolute、fixed）

补充：它的值也可以写成inherit，只要它的结果能是上边的三种也可以。不能是static，因为这个是默认值，相当于没有定位


首先测试定位为abso

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值