IE下input text在字符超出文本框长度时，padding-left和padding-right失效

最新推荐文章于 2024-07-09 11:24:44 发布
转载 最新推荐文章于 2024-07-09 11:24:44 发布 · 2.6k 阅读 · 0

本文探讨了在IE8浏览器中，当文本框内的字符超出文本框长度时，出现的padding-left和padding-right失效的问题。该问题在Firefox浏览器中未出现。寻求一种解决方案使得在IE8下也能正常显示。 


<input type="text" style="padding-left:25px; padding-right:15px; width:230px;">
当我在这个文本框内输入的字符超出文本框的长度时，padding-left和padding-right就失效了。IE存在这个问题， FF正常运行。
求能IE下正常运行的方法？




ie8下存在问题 




ff正常显示


                

        

    


  



    



                



	

		

			

				
					
鸿蒙OpenHarmony【TextInput】ArkTS文本与输入

				
			

			

				

					asfn123123的博客
				

				

					11-08
					
					1941
					
				

			

		

		

			
				
单行文本输入框组件。


			
		

	



                

            
              



	

		

			

				
					
鸿蒙5.0版开发：ArkTS基础组件（TextInput）

				
			

			

				

					m0_69424697的博客
				

				

					09-21
					
					2133
					
				

			

		

		

			
				
单行文本输入框组件。

			
		

	



              


  
              

                


	

		

			

				
					
css中paddingright失效,子元素内容超出父元素时，padding-right失效，没有留白

				
			

			

				

					weixin_42132354的博客
				

				

					08-03
					
					1430
					
				

			

		

		

			
				
场景介绍父元素内有数量不固定的子元素，当子元素宽度之和小于父元素时，子元素平均分配父元素宽度；当子元素宽度之和大于父元素时，子元素有最小宽度，滚动条显示。1.  子元素宽度小于父元素，上下左右留有空白2. 子元素宽度大于父元素，上下左右留有空白错误实现.box {width: 500px;border: 1px solid #e0e0e0;padding: 20px;display: flex;o...

			
		

	





	

		

			

				
					
padding 影响文本多行溢出

				
			

			

				

					Meet的博客
				

				

					12-01
					
					820
					
				

			

		

		

			
				
多行溢出加上padding之后显示失效了。在换行元素外边套一层。

			
		

	



		

			
		



	

		

			

				
					
CSS padding 属性和CSS 单边内边距属性

				
			

			

				

					前端基础入门学习线路
				

				

					02-15
					
					3859
					
				

			

		

		

			
				
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。

CSS padding 属性定义元素边框与元素内容之间的空白区域。

CSS padding 属性

CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。padding是比较常用CSS样式，可以利用padding内边距设置上、下、左、右对象内容与四个边距距离间隔...

			
		

	





	

		

			

				
					
CSS层叠样式表—CSS内外边距属性

				
			

			

				

					qq_36893834的博客
				

				

					08-02
					
					1174
					
				

			

		

		

			
				
内边距padding，又常常被称为“补白”，它指的是内容区到边框之间的那一部分。内边距都是在边框内部的。从CSS盒子模型中我们可以看出，内边距分为4个方向：padding-top、padding-right、padding-bottom、padding-left。语法：




属性
作用




padding-top
上内边距


padding-right
右内边距


padding-bottom
下内边距


padding-left
左内边距



padding属性简写形式
跟border属性

			
		

	





	

		

			

				
					
CSS的margin失效、塌陷和兼容问题

				
			

			

				

					一杯清泉
				

				

					07-06
					
					2177
					
				

			

		

		

			
				
在标准文档流中，竖直方向的margin不叠加，以较大的为准，水平方向不影响，可以叠加。注意是标准文档流，不是标准文档流不存在塌陷现象。


        要想使p的margin生效，需要给父布局的div添加border，否则margin无效。margin表示兄弟和兄弟之间的距离，最好不要使用margin表示父子之间的距离，要善于使用padding。




四、margin的IE6兼容问题

1、margin双倍问题         浮动方向和margin方向相反，左浮动+右margin2、IE6的三像素

			
		

	





	

		

			

				
					
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：TextInput）

				
			

			

				

					m0_64420071的博客
				

				

					03-13
					
					2754
					
				

			

		

		

			
				
ArkTS声明式开发（基础手势：TextInput）

			
		

	





	

		

			

				
					
若依 ruoyi-vue SpringBoot highlight-textarea 输入框敏感词关键词高亮标红（二）

				
			

			

				

					Xiaoweidumpb
				

				

					07-09
					
					1073
					
				

			

		

		

			
				
参考文章，非常感谢大佬的分享
实现可高亮的输入框 — HighlightTextarea
GitHub:highlight-textarea可看作者上一篇文章
若依 ruoyi-vue SpringBoot聊天敏感词过滤sensitive-word（一）审核时，输入框高亮敏感词，并且能编辑

			
		

	





	

		

			

				
					
在vue2中编写一个子组件，要求左一个图像框和右一个文本框下面一个上传图像文件的input，可以通过拖拽图像文件或者使用上传图像文件的input将图像显示在图像框内，上传图像要求base64编码和urlencode，大小不超过4M。图片的base64编码不包含图片头的支持图片格式：jpg、bmp、png，最短边至少50px，最长边最大4096px。上传后的返回值中包含文字，该文字应显示在文本框中

					
最新发布

				
			

			

				

					04-04
				

			

		

		

			
				
因为img.src被设置为临时URL，并且在img.onload中立即调用了revokeObjectURL，这会导致图片被释放，之后imageUrl设置为该临时URL时可能失效。正确的做法应该是，在图片加载完成后，将imageUrl设置为临时URL，然后在...

			
		

	





	

		

			

				
					
html设置span的外边距,在CSS中span标签设置padding-top不管用

				
			

			

				

					weixin_30975527的博客
				

				

					06-04
					
					3705
					
				

			

		

		

			
				
在CSS中span标签设置padding-top不管用，里面的内容不往下走，按f12打开调试模式，发现，span上边框反而向上走了，不知道为什么先复制点答案，以后再搞明白。在解决问题前,我们先了解下span标签。标签被用来组合文档中的行内元素(内联元素)。###span标签有这么几个特点:1、span标签是一个内联元素,只能容纳文本或者其他内联元素；2、和其他内联元素一样,内联元素的宽度和高度就是...

			
		

	





	

		

			

				
					
【记】IE下input标签中的padding-left和padding-right

				
			

			

				

					weixin_30823001的博客
				

				

					02-06
					
					316
					
				

			

		

		

			
				
最近遇到一个问题，那就是input在IE系列中对padding的支持不够好。如果我们给input定义padding-left和padding-right，希望输入的文字距离左右边框有一定的距离，再加上背景图片，实现一个像bing那样的输入框效果。但是，这样的想法固然好，但是在IE下会不尽如人意。查看bing的搜索框才知道，原来它的的搜索框图片和输入文字根本就不是一个input搞定的，而...

			
		

	





	

		

			

				
					
文本溢出解决text-overflow: ellipsis；不生效的问题

				
			

			

				

					高性价比服务器就选：蓝易云
				

				

					03-14
					
					4206
					
				

			

		

		

			
				
如果以上都无法解决问题，可能需要检查是否有其他CSS规则覆盖了你的样式，或者浏览器是否支持。用于隐藏超出元素宽度的内容，

			
		

	





	

		

			

				
					
(css)span内容过长省略加提示

				
			

			

				

					nyf_unknow的博客
				

				

					02-17
					
					1868
					
				

			

		

		

			
				
【代码】(css)span内容过长省略加提示。

			
		

	





	

		

			

				
					
input标签选中样式设置及input密码框可视设置

					
热门推荐

				
			

			

				

					start_sea的博客
				

				

					07-31
					
					1万+
					
				

			

		

		

			
				
input标签选中样式设置及input密码框可视设置
关于input标签样式使用的一些总结：
1、input标签选中时的光标紧贴边框的问题：
input标签默认光标会紧贴边框，设置padding样式可解决；
2、input标签选中样式：
input标签可对选中时的样式进行设置，同时要注意input标签外边框和内边框的影响。可通过box-shadow属性设置选中时的边框阴影。

3、input标签的type属性：
input标签的type属性有多个属性值：button、checkbox、file、hidden

			
		

	





	

		

			

				
					
ie8下div中单个input的margin和padding失效

				
			

			

				

					
				

				

					11-05
					
					3052
					
				

			

		

		

			
				
如题，需要将input外面再包一层span标签解决

			
		

	





	

		

			

				
					
vue中css使用padding-left导致input框变长

				
			

			

				

					Bright2017的博客
				

				

					01-23
					
					3264
					
				

			

		

		

			
				
问题是这样的，我需要做一个响应式的登录框，宽度不能设置死，我是使用的element-ui框架做的。
发现页面当中账号和密码这一行的长度要比下面多出来。
仔细检查代码发现，取消了padding-left：20px；之后就正常了。
解决方式，
1.改成缩进即可，text-indent:20px;
2.这是因为盒子模型不同。简单说，两种模式，一种是当前的元素宽高包含了padding，一种是不包

			
		

	





	

		

			

				
					
ios下input框的默认padding问题

				
			

			

				

					weixin_46067773的博客
				

				

					11-13
					
					722
					
				

			

		

		

			
				
ios下input框的默认padding问题

如图上面的 公司1 是div，下面的两个11是input框 两侧的padding值相同但是输入内容后去却对不齐
解决方法
给input 加 样式
box-sizing: border-box;
padding: 0;


解决问题



			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值