标准模式中的 IE 6&7 width 100% bug

最新推荐文章于 2020-04-08 14:40:13 发布
最新推荐文章于 2020-04-08 14:40:13 发布
阅读量113 收藏
点赞数
分类专栏： CSS IE6 BUG 文章标签： IE HTML5 CSS XP Windows
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caibinghong/article/details/83670466
版权

来自：http://www.99css.com/?p=43

在 web app 项目中经常遇到这个 bug，国外称之为100% ≠ 100% bug，又分为两种：

div 的宽度 100% ≠ 100% (IE 6&7)需求：

  1. 标准模式
  2. #container 局部滚动
  3. #asie 固定宽度
  4. #content 自适应宽度

再复杂一点还会要求两列等高，可参考 http://www.99css.com/?p=40

HTML

<div id="container"> <div id="wrapper"> <div id="content"> <h2>Content</h2> </div> </div> <div id="aside"> <h2>Aside</h2> </div> </div>

 

 
 

 
 

当然，别忘了 DTD 声明，因为这个只存在于标准模式
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

 

用之前介绍的HTML5 写法亦可：
 
<!DOCTYPE html> 

 

CSS
 

/*简单重置*/ body, div, h2{margin:0;padding:0;} /*设置颜色，方便区分*/ #container{background:yellow;} #content{background:#FF8539;} #aside{background:#B9CAFF;} /*去除html默认滚动条*/ html{overflow-y:hidden;} /*关键布局代码*/ #container{height:300px;overflow:auto;} #wrapper{float:left;width:100%;margin-left:-200px;} #content{margin-left:200px;} #aside{float:right;width:200px;} 
 

 

当#content, #aside{height:200px;}时，即高度未超出#container时一切正常
 

[图片]
 

 
 

当#content, #aside{height:400px;}时，出现纵向滚动条
 

正常显示效果如下：
 

［图片］
 

 
 

E 6&7 中 bug 出现：
 


 

 
 

原因：IE 6&7 滚动条的宽度未算在 100% 中，理想的状况是：#container 的宽度(100%) + #container 滚动条的宽度
= body 的 100%，W3C对此的定义：
 

 
 
In the case of a scrollbar being placed on an edge of the element’s box,
it should be inserted between the inner border edge and the outer padding
edge. Any space taken up by the scrollbars should be taken out of (subtracted
from the dimensions of) the containing block formed by the element with
the scrollbars.
 

 

《Internet Explorer 100% Width Bug》中给出了思路：
 
element_selector { width: expression(this.parentNode.offsetHeight > this.parentNode.scrollHeight ? '100%' : parseInt(this.parentNode.offsetWidth - XX) + 'px'); } 

 

其中 XX 是滚动条的宽度，在 Windows XP 主题下是 17px，Windows 经典主题下稍微小一点，在其他第三方系统主题下有可能是不确定宽度。
 

根据下图，简单改进一下即可
 

[图片]
 

IE6
 

［图片］
 

 
 

解决方法(原理同上)
 
body{_width:expression(this.parentNode.offsetHeight > this.parentNode.scrollHeight ? '100%' : parseInt(this.parentNode.clientWidth) + 'px');} 

 

 

  1.  
    解决方法
     #wrapper{#width:expression(this.parentNode.offsetHeight > this.parentNode.scrollHeight ? '100%' : parseInt(this.parentNode.clientWidth) + 'px');} 
     
    当然，写在 js 中亦可，不过要注意不要漏掉 window 的 riseze 事件，另外，window 的 resize 事件在 IE 中有执行多次的
    bug
     
  2.  body 的宽度 100% ≠ 100% (仅 IE6)通常表现为 iframe 出现纵向滚动条时同时出现横向滚动条，简单粗暴的使用body{overflow-x:hidden;}是不负责任的，有时会截断要显示的内容第一个页面(父页面) <iframe frameborder="0" height="300" scrolling="auto" src="iframe.html" width="500"> 
     
    第二个页面(iframe)
     
    HTML
     <div></div> 
     
    CSS
     body, div{margin:0;padding:0;} div{background-color:yellow;height:500px;} 
     
    正常效果

    ［图片］
     

                

        

        




    




    

      

        

            

              
                
                  前端开发工程师
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
关于宽度100% 出现横向滚动条的问题 以及注意您的显示器...

				
			

			

				

					MrZZhou的博客
				

				

					03-25
					
					1万+
					
				

			

		

		

			
				
今天在做题的时候遇到这样一道题：


看一下感觉不难，然后就撸起来了。大体采用绝对定位，ie的盒模型（比标准盒模型好酸多了），感觉应该没啥问题的，走你->
主体代码是这样的：

	*{
	    margin: 0;
	    padding: 0;
	}
        html,body{
        	height: 100%;
        } 
        heade

			
		

	



                

              
                



	

		

			

				
					
ie6中页面的bug

				
			

			

				

					01-10
				

			

		

		

			
				
在Web开发过程中，尤其是针对IE6浏览器，开发者经常会遇到各种显示异常的问题，这些问题是由于IE6浏览器本身的渲染机制和对CSS标准支持不完全所导致的。以下是一些常见的IE6 bug及其解决方案：  1. **DOCTYPE声明**...

			
		

	



                


  
              

                


	

		

			

				
					
IE7(ie7)解析width:100%;

				
			

			

				

					congze2042的博客
				

				

					01-23
					
					171
					
				

			

		

		

			
				
So Fun! 正当web开发者对Microsoft的IE7在对Css2.1支持方面的努力做出了些肯定。但是，它却打破了width属性。为什么会这样问呢？如果你对css有些了解的话您可以做出以下尝试:使用一个HTML元素，也可以...

			
		

	





	

		

			

				
					
IE6下width:100%的BUG

				
			

			

				

					lamp专栏
				

				

					08-18
					
					1857
					
				

			

		

		

			
				
记一下今天在作页面时遇到的问题我现在只是把问题解决了，但是不知道为什么可以这样解决。数据这时候会把table的宽度就按1000px，这样会破坏上层的div样式。数据

			
		

	



		

			
		



	

		

			

				
					
bug总结-ie7下两列布局，右侧不能设置width100%

				
			

			

				

					fanhaiwang520的专栏
				

				

					05-22
					
					1554
					
				

			

		

		

			
				
以上代码发现在ie7下边右侧div会跑到下边去，原因就是右侧div设置了width：100%，将width：100%去掉即可；

			
		

	





	

		

			

				
					
CSS对IE6、IE7、IE8支持详细的易用的参考

				
			

			

				

					12-02
				

			

		

		

			
				
 - IE8引入了对DOCTYPE的识别，以启用“标准模式”，从而更好地遵循W3C标准，但IE6和IE7在没有严格DOCTYPE声明时会默认进入“quirks mode”。  5. **重要bug和不兼容问题**：  - 一些常见的IE CSS bug包括双倍边距...

			
		

	





	

		

			

				
					
CSS 在IE6, IE7 和IE8中的差别

				
			

			

				

					09-25
				

			

		

		

			
				
此外，盒模型的处理在IE6中采用的是怪异模式，而IE7和IE8通过doctype切换可以使用标准模式。  对于继承和层叠规则，IE6对某些CSS属性的继承处理得并不理想，而IE7和IE8在这方面有所改进。同时，浮动和定位在这些...

			
		

	





	

		

			

				
					
ie特有bug文档

				
			

			

				

					04-05
				

			

		

		

			
				
- **问题描述**：在IE6/7中，当子元素具有`position: relative`属性时，将父元素设置为`overflow: [hidden | auto]`等同于将子元素的定位模式重置为默认的`position: static`。 - **解决方案**：为父元素设置`...

			
		

	





	

		

			

				
					
IE6盒子模型没问题 详测双倍边距

				
			

			

				

					09-25
				

			

		

		

			
				
在实验2中，尽管DOCTYPE声明使得浏览器处于标准模式，但`#content_1`和`#content_2`之间的间距在IE6中比Firefox等其他浏览器更大，这就是由于双倍边距bug。解决这个问题的一种常见方法是使用`display:inline-block`...

			
		

	





	

		

			

				
					
为什么全部width  100%浏览器边缘存在留白？

				
			

			

				

					djl的专栏，blog.djl.cx好记
				

				

					04-28
					
					1万+
					
				

			

		

		

			
				
一般浏览器都给body加了外边距，margin:0应该能解决你所遇到的问题。但你很可能又会遇到其他奇怪的现象，比如说p的行高，在不同浏览器上显示不一致，最根本的解决方案还是重置浏览器默认样式。
可以使用目前兼容性较好的  necolas/normalize.css · GitHub


作者：子丶言
链接：https://www.zhihu.com/question/36208082/answer...

			
		

	





	

		

			

				
					
max-width:100%在td 或 table-cell 的兼容解决办法

				
			

			

				

					cc蒲公英的博客
				

				

					08-24
					
					7069
					
				

			

		

		

			
				
一直没太注意有这个坑，td或者table-cell的元素里，如果没有指定容器宽度，那么容器里的img标签max-width:100% 在IE7-11，以及firefox下会不理会max-width的限制，例如：




	max-width:100%不兼容小笔记-练小习
	
		*{
			margin: 0;
			padding: 0;
			border:0;
		}
		.img-wr

			
		

	





	

		

			

				
					
CSS中width:100%和width:auto的区别

				
			

			

				

					卡卡的笔录
				

				

					06-07
					
					1万+
					
				

			

		

		

			
				
&lt;div class="parent"&gt;
    &lt;div class="child"&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;style&gt;
.parent {
    width: 100px;
    background-color: red;
}

.child {
    width: 100%;
    backgro

			
		

	





	

		

			

				
					
CSS的width:100%和width:auto区别

					
热门推荐

				
			

			

				

					0溺水的鱼O的专栏
				

				

					12-05
					
					5万+
					
				

			

		

		

			
				
CSS的width:100%和width:auto区别
一、   问题
前段时间在调整树结构的时候，发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素，导致节点的名称只显示了一半，同时图标和名称换行显示了，但是在IE8和IE9下则显示正常。定位到问题后，最终发现是下面的属性导致的，如下图红色所致，把width的值设置为auto后即可解决问题：



 
 
.TreeVi

			
		

	





	

		

			

				
					
IE6下遮罩层不支持width:100%解决技巧

				
			

			

				

					心随梦飞
				

				

					06-06
					
					671
					
				

			

		

		

			
				
今天在写前端遮罩层时碰到一个问题，使用绝对定位给图片添加透明遮罩层时，遮罩层用width:100%，在IE6下不兼容，IE7+没问题，因为IE6下的这个100%不是针对父级容器，而是针对一个指定高度的祖先容器（高度不为auto的容器）。解决办法是：给遮罩层父容器，即 position:relative; 的类名添加 overflow:hidden; 属性。            给遮罩层添加高度大

			
		

	





	

		

			

				
					
img max-width:100% IE不起作用

				
			

			

				

					Red_Liu
				

				

					04-08
					
					1856
					
				

			

		

		

			
				
场景：
<div> css设置属性为：display:table；
<img> css 设置属性为：max-width:100%；
max-width:100% 在IE11,IE10 下失效；
解决方法：
针对IE的特性进行书写，注意先后顺序：
display: table;
display:block\0;


...

			
		

	





	

		

			

				
					
人工蜂群算法ABC-Kmean-Transformer-LSTM组合状态识别分类【含Matlab源码 6743期】.zip

				
			

			

				

					08-02
				

			

		

		

			
				
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白；
1、代码压缩包内容
主函数：Main.m；
调用函数：其他m文件；无需运行 
运行结果效果图；

2、代码运行版本
Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主；

3、运行操作步骤
步骤一：将所有文件放到Matlab的当前文件夹中； 
步骤二：双击打开除Main.m的其他m文件； 
步骤三：点击运行，等程序运行完得到结果；

4、仿真咨询
如需其他服务，可私信博主或扫描博主博客文章底部QQ名片；
4.1 CSDN博客或资源的完整代码提供
4.2 期刊或参考文献复现
4.3 Matlab程序定制
4.4 科研合作
智能优化算法优化Kmeans-Transformer-lstm分类预测系列程序定制或科研合作方向：
4.4.1 遗传算法GA/蚁群算法ACO优化Kmeans-Transformer-lstm分类
4.4.2 粒子群算法PSO/蛙跳算法SFLA优化Kmeans-Transformer-lstm分类
4.4.3 灰狼算法GWO/狼群算法WPA优化Kmeans-Transformer-lstm分类
4.4.4 鲸鱼算法WOA/麻雀算法SSA优化Kmeans-Transformer-lstm分类
4.4.5 萤火虫算法FA/差分算法DE优化Kmeans-Transformer-lstm分类
4.4.6 其他优化算法优化Kmeans-Transformer-Lstm分类

			
		

	





	

		

			

				
					
【独家首发】龙格库塔算法RUN优化Transformer-BiLSTM负荷数据回归预测【含Matlab源码 6563期】.zip

				
			

			

				

					08-02
				

			

		

		

			
				
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白；
1、代码压缩包内容
主函数：Main.m；
调用函数：其他m文件；无需运行 
运行结果效果图；

2、代码运行版本
Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主；

3、运行操作步骤
步骤一：将所有文件放到Matlab的当前文件夹中； 
步骤二：双击打开除Main.m的其他m文件； 
步骤三：点击运行，等程序运行完得到结果；

4、仿真咨询
如需其他服务，可私信博主或扫描博主博客文章底部QQ名片；
4.1 CSDN博客或资源的完整代码提供
4.2 期刊或参考文献复现
4.3 Matlab程序定制
4.4 科研合作
智能优化算法优化Transformer-Bilstm预测系列程序定制或科研合作方向：
4.4.1 遗传算法GA/蚁群算法ACO优化Transformer-Bilstm预测
4.4.2 粒子群算法PSO/蛙跳算法SFLA优化Transformer-Bilstm预测
4.4.3 灰狼算法GWO/狼群算法WPA优化Transformer-Bilstm预测
4.4.4 鲸鱼算法WOA/麻雀算法SSA优化Transformer-Bilstm预测
4.4.5 萤火虫算法FA/差分算法DE优化Transformer-Bilstm预测
4.4.6 其他优化算法优化Transformer-Bilstm预测

			
		

	





	

		

			

				
					
【中科院1区】Matlab实现海鸥优化算法SOA-RF锂电池健康状态估计算法研究.rar

					
最新发布

				
			

			

				

					08-02
				

			

		

		

			
				
1.版本：matlab2014/2019a/2024a

 2.附赠案例数据可直接运行matlab程序。 

3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 

4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 

5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 

替换数据可以直接使用，注释清楚，适合新手

			
		

	





	

		

			

				
					
css中width100%和height100%

				
			

			

				

					06-28
				

			

		

		

			
				
### 回答1：
width: 100% 和 height: 100% 是 CSS 中的两个属性，用于设置元素的宽度和高度。其中，width: 100% 表示元素的宽度将会占据其父元素的全部宽度，而 height: 100% 表示元素的高度将会占据其父元素的全部高度。这两个属性通常用于实现响应式布局，使元素能够自适应不同屏幕尺寸的设备。   

### 回答2：
CSS中的width:100%和height:100%是两个常见的属性值，它们分别表示元素的宽度和高度占据了其父元素的100%。在Web开发中，它们经常被用来实现响应式设计的效果。

首先，让我们考虑width:100%的作用。当一个元素的宽度设置为100%时，它会占用其父元素的全部可用宽度。这意味着无论父元素的宽度如何变化，子元素的宽度都会跟随变化。这样可以确保子元素填满了父元素的全部宽度。例如，当我们需要一个可以自适应宽度的图片时，可以将图片的宽度设置为100%，这样图片就能自适应其容器的宽度。

相似地，height:100%的作用是将元素的高度设置为其父元素的全部可用高度。这个属性值的用途较为有限，因为经常会出现高度塌陷的情况，因为父元素需要有一个固定的高度来撑起子元素。当父元素的高度无法确定时，该属性的值无法生效。不过，它还是可以用来实现某些特定的效果，例如纵向滚动条，可以设置父容器的高度为100%，然后设置其子容器的高度和网页内容的高度一样。

总之，CSS中的width:100%和height:100%是两个常用且十分实用的属性值。它们可以用来实现响应式设计的效果，让页面的布局更加灵活、多样化。不过，在使用时需要注意它们的适用范围和局限性，以免出现不必要的问题。   

### 回答3：
CSS中的width: 100% 和 height: 100%可以用来设置元素的宽度和高度，使其与其父级元素宽度和高度相同。这对于创建响应式设计非常有用，因为可以使元素随着浏览器窗口大小的变化而自适应调整大小。

在使用width: 100%和height: 100%之前，需要先确保元素的父级元素有一个确定的宽度和高度，否则这些样式不会起作用。例如，如果将width: 100%应用于一个没有确定宽度的div，则该div元素将会在其包含的内容中充满整个宽度，而不是其父级元素。

另外，如果一个元素有边框或内边距，使用width: 100%和height: 100%可能会导致元素的实际宽度和高度小于其父级元素的大小。在这种情况下，可以使用box-sizing: border-box样式来解决这个问题。

总之，width: 100%和height: 100%是非常有用的CSS样式，可以帮助我们创建响应式设计和具有良好尺寸适应性的网站。但是，需要注意它们的使用条件和可能存在的问题。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值