CSS hack学习经验分享：IE7浏览器 “div” 标签 “inline-block” 无效的问题

最新推荐文章于 2022-08-21 17:36:46 发布
原创 最新推荐文章于 2022-08-21 17:36:46 发布 · 779 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种使DIV元素在IE6和IE7浏览器中显示为内联的方法，通过使用特殊的CSS属性*display:inline实现。

实例讲解：

<div>123</div>
<style>
div{
    display:inline-block;
}
div{
    *display:inline;
}
</style>
如上图，因为 "*" 只有IE6、IE7能识别，所以能在IE7浏览器中将 "div" 改成 "inline" 类型

                

        

    



  



    



                



	

		

			

				
					
CSS中使用inline-block来进行居中的示例

				
			

			

				

					09-25
				

			

		

		

			
				
通过这种方式，你可以有效地利用`inline-block`属性在CSS中实现元素的居中对齐，同时注意到容器宽度的影响和如何处理潜在的空白间隙问题。这不仅适用于单个元素，也适用于一组需要居中的元素，使布局更加灵活和可...

			
		

	



                

            
              



	

		

			

				
					
如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器

				
			

			

				

					09-25
				

			

		

		

			
				
针对标题“如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器”以及描述“DOCTYPE 影响 CSS 处理”，我们将详细讨论CSS兼容性和DOCTYPE对CSS的影响，以及处理这些浏览器差异的策略。  1. **DOCTYPE与CSS...

			
		

	



              


  
              

                


	

		

			

				
					
当inline-block或者float失效的时候怎么弄

				
			

			

				

					xiaozhen0610的博客
				

				

					07-18
					
					1002
					
				

			

		

		

			
				
当我们想要元素水平排列的时候，inline-block或者float是最好的选择了，但是当父元素的宽高都设置了的时候，子元素会失效，如下：
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
 

			
		

	





	

		

			

				
					
display:inline-block在IE6/Ie7和IE8中的区别

				
			

			

				

					WEBCODE
				

				

					09-13
					
					200
					
				

			

		

		

			
				

转载:http://hi.baidu.com/minmin_devil/blog/item/74e603226cedd148ad34de14.html

在IE6、IE7中不识别display:inline-block属性，但使用inline-block属性在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。从上面的分析也不难理解为什么IE6...

			
		

	



		

			
		



	

		

			

				
					
display: inline-block的总结

				
			

			

				

					游坦之的博客
				

				

					08-21
					
					2360
					
				

			

		

		

			
				
我尝试了很多种办法，设置高度，浮动，定位什么的都没有用，后来看了一下网易云音乐的源代码，发现他用到了这个display:inline-block;同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。由效果图可以看出，display：block 虽然支持宽高、内边距、外边距的设置，但是每一个block后面，都会默认自动添加一个换行符。由效果图可以看出，inline不支持设置宽高、内边距，外边距，即使设置了也不会产生应有的效果。

			
		

	





	

		

			

				
					
深入研究display:inline-block在浏览器中的应用

				
			

			

				

					weixin_34375233的博客
				

				

					04-13
					
					122
					
				

			

		

		

			
				
写在前面的话，在我开发CSS的过程中，我发现很多诡异的问题都是对概念理解有偏差，所以在每篇开始的时候，我都把W3c的解释拿出来晒晒。个人经验，很多的问题看看W3C一般都能够解决，W3C是最好的参考书。	官方解释：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 按照这个解释：支持的浏览器有（ie8,ie9,chrome,firefox3.6+,由于我...

			
		

	





	

		

			

				
					
CSS:IE6/Ie7 display:inline-block 不起作用

				
			

			

				

					把项目开发中遇到的问题记录下来
				

				

					09-28
					
					2086
					
				

			

		

		

			
				
在 IE6、IE7中不识别display:inline-block属性，但使用inline-block属性在IE下会触发layout，从而使内联元素 拥有了display:inline-block属性的表症。从上面的分析也不难理解为什么IE6、IE7下对块元素设置display:inline- block属性无法实现inline-block的效果。这时块元素仅仅是被inline-block触发了l...

			
		

	





	

		

			

				
					
CSS属性display:inline-block用法深入理解

				
			

			

				

					09-25
				

			

		

		

			
				
尽管存在浏览器兼容性挑战，但通过合理的CSS hack和技巧，我们可以克服这些问题，实现跨浏览器的`inline-block`效果。在实际应用中，建议结合其他CSS3布局技术，如Flexbox或Grid，以获得更强大、更一致的布局解决...

			
		

	





	

		

			

				
					
CSS display属性详解：inline、block与inline-block用法解析

				
			

			

				

					
				

			

		

		

			
				
特别是在IE6/7等老旧浏览器中，inline-block的支持存在缺陷，需通过`zoom: 1;`和`*display: inline;`等Hack技巧进行修复。尽管如今主流浏览器均已良好支持inline-block，但在维护旧项目或面向特定用户群体时，仍需...

			
		

	





	

		

			

				
					
解决IE6,7下display:inline-block;失效问题。

				
			

			

				

					yangjidaimin的专栏
				

				

					03-11
					
					573
					
				

			

		

		

			
				
div {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}
IE6能识别*，但不能识别
 !important, 
IE7能识别*，也能识别!important; 
FF不能识别*，但能识别!important;

			
		

	





	

		

			

				
					
css//设置两个DIV为display:inline-block出现上下错位问题

				
			

			

				

					weixin_37877794的博客
				

				

					09-08
					
					1074
					
				

			

		

		

			
				
https://www.cnblogs.com/zml-mary/p/7722061.html
发现AB两个div设置display：inline-block，出现上下错位问题，当AB里面内容为空时，错位问题消失
看了网上资料以及通过实践分析，总结如下

1.同一行的行内元素对齐方式默认是底部对齐，即vertical-align：baseline
2.对于内容为空的inline-block元素而言，该元素的基线就是它的margin底边缘，否则就是元素的内部最后一行内联元素的基线

解决方式：

1.floa

			
		

	





	

		

			

				
					
inline-block在360浏览器中失效的解决方法

				
			

			

				

					暮雪进化史
				

				

					01-12
					
					1145
					
				

			

		

		

			
				
使{display:inline-block; zoom: 1;
*display: inline;}




text-align:center;
text-align:right;
等属性控制display:inline-block;的文字排序方式

			
		

	





	

		

			

				
					
inline, inline-block, block 区别 & 宽高设置 & 与margin、padding共用失效情况 整理

				
			

			

				

					BigOrange的博客
				

				

					11-16
					
					1989
					
				

			

		

		

			
				
根据demo测试后的总结如下：

display:inline;

并列显示在同一行
	宽高不可设置；
	宽高就是它包含的文字或图片的宽高。
	margin：只有左右，上下失效
	padding：padding-top会超出父级
display:inline-block;

并列显示在同一行
	宽高可设置；
	元素宽度在不设置的情况下，和内容的宽度一致
	高度在不设置情况下，和内容高度一致（而对于...

			
		

	





	

		

			

				
					
 给div使用display:inline-block产生的问题

				
			

			

				

					weixin_34309435的博客
				

				

					11-13
					
					486
					
				

			

		

		

			
				
使用display:inline-block产生的问题
给两个div设置了display:inline-block，也控制了两个div的长度，但两个div不在同一行案例：
    ---div部分---
    <div id="div0">
        <div id="div1"></div>
...

			
		

	





	

		

			

				
					
display:inline-block属性的标签出现的问题及解决方法

				
			

			

				

					huanhuan03的博客
				

				

					03-20
					
					1539
					
				

			

		

		

			
				
display:inline-block

			
		

	





	

		

			

				
					
使用display: inline-block;遇到的问题及解决

				
			

			

				

					weixin_30558305的博客
				

				

					12-10
					
					595
					
				

			

		

		

			
				
1、使用display: inline-block;布局div会使两个字div中间产生间隙，解决办法有多种:
①可以不换行的将两个div书写在一行，因为换行也会占dom文档流。
②可以在父元素中加上font-size: 0;也能消除中间间隙。
2、有些时候两个使用display:inline-block;的两个子元素可能会出现上下错位的情况，也就是没有上上部对齐，发生这种问题的原因是inli...

			
		

	





	

		

			

				
					
div inline-block

				
			

			

				

					qq 117791303
				

				

					12-26
					
					363
					
				

			

		

		

			
				
#div_top
{
	position: absolute;
    right: 5px;
    top: 0;
    height: 30px;
    margin: 0px;
    background: #f2f2f2;
    border: 1px solid #000;
    z-index: 999;
    left: 5px;
}

#div_top div
{
	display: inline-block;
	height: 30px;
	width: 30px;
	bo.

			
		

	





	

		

			

				
					
关于div inline-block的使用

				
			

			

				

					weixin_30657541的博客
				

				

					05-30
					
					169
					
				

			

		

		

			
				
附：最近在做UML模式设计大作业，使用inline-block遇到了一些问题。
（一）用inline 和 inline-block 设置行内元素
　　两者都可用来设置某些元素为行内元素（如div、span等），但是两者存在区别。
　　　　1、使用inline时，此元素会被显示为内联元素，元素前后没有换行符，这时，width属性对该元素无效。（该设置为默认设置）
　　　　2、使用i...

			
		

	





	

		

			

				
					
div横排放置对齐问题；block,inline,inline-block区别

				
			

			

				

					
				

				

					04-11
					
					325
					
				

			

		

		

			
				
1、左右两个div都设置为float:left，如果右边div没有设置宽度，右边div的宽度会根据div里的内容自动调整。
缺点：不易控制
2、只有左侧div设置为float:left，右侧div设置overflow:auto;，右侧div将会占据整个右侧剩余宽度。
缺点：如果有多个div 比如三个及以上了？
3、两个div都设置为display:inline-block;这样...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值