当inline-block和text-indent遇到IE6,IE7

最新推荐文章于 2021-06-15 15:55:47 发布
最新推荐文章于 2021-06-15 15:55:47 发布
阅读量96 收藏
点赞数
原文链接：http://www.cnblogs.com/aNd1coder/archive/2011/07/12/2104331.html
版权

在做一个按钮时,由于按钮的文字的艺术感太强直接跟背景一起切片,但是处于SEO考虑还是在a标签内添加了相应的文字,

 
  
 
   < 
   p 
   > 
     
   < 
   a  
   href 
   ="file.pdf" 
    class 
   ="icon icon-pdf" 
   > 
   Download PDF 
   </ 
   a 
   > 
     
   </ 
   p 
   > 
  
 
 
 
 
常规CSS如下:
 
 
 
  
 
  
 
   .icon  
   { 
    display 
   : 
   inline-block 
   ; 
    width 
   : 
   16px 
   ; 
    height 
   : 
   16px 
   ; 
    text-indent 
   : 
   -9999px 
   ; 
     
   } 
   
.icon-pdf  
   { 
    background-image 
   : 
   url(pdf.png) 
   ; 
     
   } 
  
 
 
 
 
嗯,在FF,Chrome IE8,XXX主流浏览器下展现得很完美,处于恶心的原因忘记在IE6,7下看了...
 
 
嗯,几天后测试跑过来说漂漂的按钮怎么在IE6,7下消失了,当时就惯性的打开浏览器并开启调试工具一通折腾,最后找到解决方案,调整下样式如下:
 
 
 
  
 
  
 
   .icon  
   { 
    display 
   : 
   block 
   ; 
    width 
   : 
   16px 
   ; 
    height 
   : 
   16px 
   ; 
   text-indent:-9999px 
     
     
     
     
     
     
     
     
   } 
  
 
 
 
 
或
 
 
 
  
 
  
 
   .icon  
   { 
    display 
   : 
   inline-block 
   ; 
    width 
   : 
   16px 
   ; 
    height 
   : 
   16px 
   ; 
    font-size 
   : 
   0 
   ; 
    line-height 
   : 
   0 
   ; 
     
   } 
  
 
 
 
 
 
 
或者修改你的html如下:
 
 
 
  
 
  
 
   < 
   p 
   > 
     
   &nbsp; 
     
   < 
   a  
   href 
   ="file.pdf" 
    class 
   ="icon icon-pdf" 
   > 
   Download PDF 
   </ 
   a 
   > 
     
   </ 
   p 
   > 
  
 
 
 
 
给a标签前加上&nbsp;等等等方法...
 
 
inline或inline-block元素设置text-indent在IE6/IE7中显示不正常的bug致使text-indent会传递到父及元素，也就出现了上文中的结果。
 
 
造成这种情况的原因应该是IE6/IE7并没有真正实现inline-block,而是通过设置display:inline-block触发了IE的layout,从而使内联元素拥有了inline-block属性的表症。
 
 
考察元素的默认样式，可知：input、select、button、textarea的默认display皆为inline-block,所以在布局时应加以注意...
 
 

 

 

转载于:https://www.cnblogs.com/aNd1coder/archive/2011/07/12/2104331.html

                

        




    

  



    

      

        

            

              
                
                  a240856742
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
IE6中a标签同时使用inline-block与text-indent时出现的BUG

				
			

			

				

					09-25
				

			

		

		

			
				
在本文中，我们将深入探讨一个特定的问题：在IE6中，当`<a>`标签同时使用`inline-block`和`text-indent`属性时出现的显示异常。  `inline-block`是一个CSS布局属性，它使元素表现得像内联元素，但同时允许设置宽度、...

			
		

	



                

            
              



	

		

			

				
					
浅谈inline-block及解决空白间距

				
			

			

				

					11-30
				

			

		

		

			
				
需要注意的是，IE6 和 IE7 对 `display: inline-block` 的支持并不完全。虽然它们确实可以识别这个属性，但是表现不完美，特别是在处理空白间距问题上。为了使这些老版本的 IE 浏览器支持 `inline-block`，可以使用...

			
		

	



              


  
              

                


	

		

			

				
					
当inline-block遇到text-indent，IE67生气了

				
			

			

				

					懒人改变世界
				

				

					08-06
					
					575
					
				

			

		

		

			
				
恩！！我们都知道，IE67本身是不支持inline-block的。而是通过zoom来触发元素的layout。然后显示inline属性。平时一直这样用着不存在任何问题。
但如果要使用text-indent时，IE67真的生气了。IE67不是真正的inline-block，所以将text-indent传递给了它爹(父元素)。造成了怪异模式。
木有办法，只能放弃text-indent，你懂得。这个时

			
		

	





	

		

			

				
					
IE6和7下text-indent导致inline-block标签消失的bug

				
			

			

				

					diaosheng8387的博客
				

				

					01-24
					
					104
					
				

			

		

		

			
				
在实际应用中，考虑到seo，很多button，icon都要用到inline-block和text-indent来处理，例如：

<a href="#" class="btn">Button</a>

css我习惯写成这样

.btn{display:inline-block; width:100px; height:23px; text-indent:...

			
		

	



		

			
		



	

		

			

				
					
【转】当inline-block和text-indent遇到IE6,IE7

				
			

			

				

					weixin_30736301的博客
				

				

					03-31
					
					98
					
				

			

		

		

			
				
在实际应用中，考虑到seo，很多button，icon都要用到inline-block和text-indent来处理，例如：<a href="#" class="btn">Button</a>css我习惯写成这样.btn{display:inline-block; width:100px; height:23px; text-indent:-9999px;backgroun...

			
		

	





	

		

			

				
					
inline-block和text-indent在IE6,IE7下同时使用的兼容问题解决方法

				
			

			

				

					weixin_30304375的博客
				

				

					12-26
					
					111
					
				

			

		

		

			
				
在实际应用中，考虑到seo，很多button，icon都要用到inline-block和text-indent来处理，例如：
<a href=”#”>Button</a>
当我们把css写成这样
.btn{display:inline-block; width:100px; height:23px; text-indent:-9999px;backgroun...

			
		

	





	

		

			

				
					
html text-indent,css之text-indent

				
			

			

				

					weixin_34370877的博客
				

				

					06-15
					
					868
					
				

			

		

		

			
				
text-indent(一个在ie6下有着奇怪表现的属性)text-indent作为大家都很熟悉的一个css属性，应该都不太会对这个属性去做过多的研究。我本来也是觉得这属性也就这样了，直到今天遇到的一个以前未注意过的bug...先看下w3school对text-indent的介绍：定义text-indent 属性规定文本块中首行文本的缩进。注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。...

			
		

	





	

		

			

				
					
display:inline-block是什么意思

				
			

			

				

					柯思铭的博客
				

				

					11-07
					
					2420
					
				

			

		

		

			
				
很多时候我们必须使一些块元素并排显示，一般想到的是必须使用浮动，但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG，所以很多时候不得不把这个块元素套在一个内联元素里面，然后给内联元素浮动和边距。今天看到了怿飞、秦歌和乌龙茶关于display:inline-block的文章，很不错，综合一下，记录下来。

display:inline-block
简单来说就是将对象呈递为内联对象，

			
		

	





	

		

			

				
					
PHP四边都有空白区域,去掉display:inline-block元素间的多余空白

				
			

			

				

					weixin_34711121的博客
				

				

					04-04
					
					149
					
				

			

		

		

			
				
如下一段代码，display:inline-block元素间的多余空白：*{margin:0; padding:0;}body{font:12px/20px Tahoma, Geneva, sans-serif; padding:200px;}img {border:0;}ul li{ list-style:none;}.test{width:200px; border:1px blue soli...

			
		

	





	

		

			

				
					
text-indent无效解决方案

				
			

			

				

					angou6476的博客
				

				

					12-11
					
					248
					
				

			

		

		

			
				
text-indent是用来字符缩进的。
1.text-indent所在的元素是行内元素而非块级元素。比如用在span,a等行内元素上。解决方案：在行内元素加上display:block; 或者把目标元素放入<div>等块级元素，然后把text-indent样式应用到<div>等块级元素。
2.text-indent所在的元素未使用overflow属性。解决方...

			
		

	





	

		

			

				
					
IE6,IE7下text-indent消失问题

				
			

			

				

					奈文摩尔的世界
				

				

					03-02
					
					916
					
				

			

		

		

			
				
实际应用中，考虑seo的情况下，很多button，icon都要用到inline-block和text-indent来处理

例如：

HTML:Button
CSS: .btn{display:inline-block; width:100px; height:23px; text-indent:-9999px;background-image:url(img.jpg);}
如果这样写

			
		

	





	

		

			

				
					
模拟兼容性的 inline-block 属性

				
			

			

				

					10-30
				

			

		

		

			
				
1. 为IE6和IE7触发hasLayout：可以通过设置 `zoom:1` 或者将元素的 `position` 属性设置为 `relative` 来触发IE的hasLayout特性，从而模拟 `inline-block` 的效果。  2. Firefox私有属性：旧版的 Firefox 2 使用 `-...

			
		

	





	

		

			

				
					
基于多目标粒子群算法的冷热电联供型综合能源系统运行优化

					
最新发布

				
			

			

				

					05-05
				

			

		

		

			
				
内容概要：本文详细介绍了基于多目标粒子群（MOPSO）算法的冷热电联供（CCHP）综合能源系统运行优化的方法和技术细节。文章首先构建了一个涵盖冷、热、电负荷的优化调度模型，该模型不仅考虑了多种能源资源如燃气轮机、电制冷机、锅炉和风光机组，还包括与上级电网的购售电交易。随后，文章展示了MOPSO算法的具体实现步骤，包括粒子初始化、迭代更新、惯性权重调整、非支配排序和拥挤度计算等关键技术环节。此外，文中还讨论了MATLAB仿真平台的优势及其在处理多时间尺度耦合、风光出力波动等方面的应用。最终，通过Pareto前沿分析，揭示了系统在不同条件下的最优运行模式。
适用人群：适用于从事能源系统优化的研究人员、工程师以及对多目标优化算法有兴趣的学习者。
使用场景及目标：①帮助研究人员理解和应用MOPSO算法进行CCHP系统的优化；②为工程师提供具体的代码实现和仿真工具，以便更好地设计和管理实际的能源系统；③促进学术交流和技术进步，推动可持续能源的发展。
其他说明：文章提供了详细的MATLAB代码片段，便于读者理解和复现实验结果。同时，强调了多目标优化在解决复杂能源系统问题中的重要性和优越性。


			
		

	





	

		

			

				
					
山东大学项目实训-创新实训-法律文书专家系统-项目报告（二）

				
			

			

				

					05-05
				

			

		

		

			
				
原始数据集

			
		

	





	

		

			

				
					
5小时精通Go与ApacheRanger：权限管理集成.pdf

				
			

			

				

					05-05
				

			

		

		

			
				
文档支持目录章节跳转同时还支持阅读器左侧大纲显示和章节快速定位，文档内容完整、条理清晰。文档内所有文字、图表、函数、目录等元素均显示正常，无任何异常情况，敬请您放心查阅与使用。文档仅供学习参考，请勿用作商业用途。
编译闪电般迅速，并发性能卓越，部署轻松简单！Go 语言以极简设计理念和出色工程性能，成为云原生时代的首选编程语言。从 Docker 到 Kubernetes，全球顶尖科技企业都在采用 Go。点击了解 Go 语言的核心优势、实战窍门和未来走向，开启高效编程的全新体验！


			
		

	





	

		

			

				
					
数据库相关学习资源，数据库

				
			

			

				

					05-05
				

			

		

		

			
				
数据库

			
		

	





	

		

			

				
					
异步电机矢量控制系统仿真模型（基于MATLAB 21a版本）：电流滞环控制及详细精美报告

				
			

			

				

					05-05
				

			

		

		

			
				
内容概要：本文详细介绍了基于Matlab 2021a的异步电机矢量控制系统中电流滞环控制的实现过程。首先，文章解释了电流环的整体结构，包括定子电流的坐标变换、转矩分量和励磁分量的分离以及旋转变压器模块的应用。接着，展示了电流滞环控制的核心代码，强调了带积分修正的滞环控制机制，并讨论了SVPWM模块的实现技巧。此外，文章探讨了速度环PI参数的自整定设计、谐波分析、磁链观测器的改进方案以及仿真加速技巧。最后，分享了一些实用的调试经验和仿真优化方法，如参数自适应调整、变步长求解器的选择和数据存储格式的优化。
适合人群：从事电机控制领域的研究人员和技术人员，尤其是对异步电机矢量控制和电流滞环控制感兴趣的读者。
使用场景及目标：适用于希望深入了解异步电机矢量控制系统中电流滞环控制实现细节的研究人员和技术人员。目标是帮助读者掌握电流滞环控制的关键技术和调试技巧，提高仿真实践能力。
其他说明：文中提供了丰富的代码片段和调试经验，有助于读者更好地理解和应用所介绍的技术。同时，报告中还包括详细的故障分析和解决方案，确保读者能够避免常见陷阱并顺利进行仿真。


			
		

	





	

		

			

				
					
解决inline-block元素空白间距问题与优化方法

				
			

			

				

					
				

			

		

		

			
				
本文主要探讨了在HTML和CSS中使用`display: inline-block`时遇到的空白间距问题，特别是在多个元素并排排列时，由于浏览器默认的行内元素间距可能会导致多余的空白。作者通过实例展示了一个包含多个`<a>`标签的`div`...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值