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

最新推荐文章于 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
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
第四章 CSS样式基础

				
			

			

				

					whitesandcnm的博客
				

				

					09-23
					
					2481
					
				

			

		

		

			
				
通过CSS的display属性，开发者可以将元素的显示方式从默认的行内或块级形式转换为另一种形式。常见的display值：block：将元素作为块级元素显示。inline：将元素作为行内元素显示。inlineblock：将元素作为行内块级元素显示。none：隐藏元素，不占据任何页面空间。例子：html通过display: inlineblock，元素从块级元素变为行内块级元素，能够设置宽度且不再独占一行。

			
		

	



                

            
              



	

		

			

				
					
css实现单边斜切效果

				
			

			

				

					“明明很开心”的博客空间
				

				

					09-29
					
					4145
					
				

			

		

		

			
				
需求
UI图中有需要斜切图样的需求，一个进度条，并且进度项不定，是一个list类型。效果如图，以下就是一个三个元素的数组遍历生成的进度条：

第一次尝试
首先写进度条并不难，只需要以下结构：
// html
<div class="progress-outer">
	<div v-for="(item,key) in items" :key="index"  class="progress-inner" :style={'width': item.percent + '%','left':

			
		

	



              


  
              

                


	

		

			

				
					
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测试成功。

			
		

	





	

		

			

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

				
			

			

				

					仰望者！
				

				

					03-10
					
					406
					
				

			

		

		

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

			
		

	



		

			
		



	

		

			

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

				
			

			

				

					cms专家
				

				

					08-11
					
					7990
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					weixin_44886911的博客
				

				

					09-05
					
					454
					
				

			

		

		

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

...

			
		

	





	

		

			

				
					
ie6中解决z-index

				
			

			

				

					04-20
				

			

		

		

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

			
		

	





	

		

			

				
					
@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 样式写法：  ```...

			
		

	





	

		

			

				
					
<template>
    <div class="home">
      <h1 class="page-title">欢迎来到Vue商城</h1>
      <div class="product-grid">
        <div v-for="product in products" :key="product.id" class="product-card">
          <div class="image-container">
            <img :src="product.image" :alt="product.name" class="product-image">
            <button class="quick-view">快速查看</button>
          </div>
          <div class="product-info">
            <h3 class="product-name">{{ product.name }}</h3>
            <p class="product-price">¥{{ product.price }}</p >
            <div class="rating">
              <span class="star">★</span>
              <span class="star">★</span>
              <span class="star">★</span>
              <span class="star">★</span>
              <span class="star">☆</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        products: [
          { id:1, name: &#39;Vue主题T恤&#39;, price:99, image: require(&#39;@/assets/hww.png&#39;)},
          { id:2, name: &#39;JavaScript权威指南&#39;, price:68, image: &#39;https://via.placeholder.com/300&#39; },
          { id:3, name: &#39;前端开发工具包&#39;, price:199, image: &#39;https://via.placeholder.com/300&#39; },
          { id:4, name: &#39;响应式设计教程&#39;, price:78, image: &#39;https://via.placeholder.com/300&#39; },
          { id:5, name: &#39;Vue组件库订阅&#39;, price:129, image: &#39;https://via.placeholder.com/300&#39; },
          { id:6, name: &#39;CSS3实战手册&#39;, price:55, image: &#39;https://via.placeholder.com/300&#39; }
        ]
      }
    }
  }
  </script>
  <style scoped>
  .page-title {
    margin-bottom: 2rem;
    font-size: 2.5rem;
    position: relative;
    display: inline-block;
  }
  .page-title::after {
    content: &#39;&#39;;
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    border-radius: 3px;
  }
  .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
  }
  .product-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
  }
  .product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
  }
  .image-container {
    position: relative;
    overflow: hidden;
  }
  .product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.5s ease;
  }
  .product-card:hover .product-image {
    transform: scale(1.05);
  }
  .quick-view {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%) translateY(150%);
    padding: 8px 20px;
    background: white;
    border: none;
    border-radius: 30px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
  }
  .product-card:hover .quick-view {
    transform: translateX(-50%) translateY(0);
  }
  .product-info {
    padding: 1.5rem;
  }
  .product-name {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
  }
  .product-price {
    font-size: 1.4rem;
    font-weight: 700;
    color: #e74c3c;
    margin-bottom: 0.8rem;
  }
  .rating {
    display: flex;
    gap: 2px;
  }
  .star {
    color: #f1c40f;
    font-size: 1.2rem;
  }
  </style>把里面的图片换成我src下面的assests里面的图片我该怎么改不用那个链接方式了，为什么我改完我的vue页面就不显示了为什么呢

				
			

			

				

					06-16
				

			

		

		

			
				
1.错误地使用了require：Vite项目不支持require（因为Vite使用ES模块），所以如果从VueCLI迁移过来的代码使用了require，需要改为import。2.路径错误：直接使用字符串路径如`src="assets/..."`，在开发环境可能有效...

			
		

	





	

		

			

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

				
			

			

				

					weixin_30379973的博客
				

				

					09-11
					
					909
					
				

			

		

		

			
				
在实际开发中，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
					
					106
					
				

			

		

		

			
				
转载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
					
					483
					
				

			

		

		

			
				
出于某种原因,我无法将我的图像定位到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
					
					214
					
				

			

		

		

			
				
请看下图：
[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
					
					9908
					
				

			

		

		

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


IE11效果：


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

			
		

	





	

		

			

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

				
			

			

				

					weixin_34763548的博客
				

				

					01-28
					
					1004
					
				

			

		

		

			
				
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

			
		

	





	

		

			

				
					
绝对定位right:0;无效_CSS中常用的几种定位方式

				
			

			

				

					weixin_39895167的博客
				

				

					01-24
					
					760
					
				

			

		

		

			
				
第一类float定位（即浮动定位）：这种定位方式很简单，只需规定一个浮动的方向（如：float:left;就表示这个元素向左边摆放），它的定位是相对于父元素容器；如果该元素设置了浮动，后面紧邻的则会受到浮动的影响，因此需要后面的元素若要不受影响，则要在后面清除浮动（可用clear:both;等方法），在两个相邻元素设置相同浮动的情况下，两元素将按顺序相邻摆放。这种定位使得元素脱离文档流。第二类po...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值