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

最新推荐文章于 2024-03-14 00:27:29 发布
最新推荐文章于 2024-03-14 00:27:29 发布
阅读量2.5k 收藏
点赞数
分类专栏： css 


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

 

ie8下存在问题 
 

 

ff正常显示

                

        

        

    

  


    


                



	

		

			

				
					
前端常用属性知识点--文档

				
			

			

				

					JackieDYH的博客
				

				

					03-08
					
					969
					
				

			

		

		

			
				
清除浮动带来的影响--.clearfix


.clearfix{ *zoom:1; }
.clearfix::after{
    content: "";
    display: block;
    clear:both;
    visibility: hidden;
    height: 0;


弹性盒子-flex


1）弹性盒子——css3中新增的布局方式。是一种当屏幕大小、设...

			
		

	



                

            
              



	

		

			

				
					
前端学习笔记 - 移动端Web开发

				
			

			

				

					fengxm0309的博客
				

				

					10-18
					
					1137
					
				

			

		

		

			
				
移动端基础

浏览器现状

PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器

移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌 浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。


	国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样
	
	
	兼容移动端主流浏览器，处理Webkit内核浏览器即可
	

			
		

	



              


  
              

                


	

		

			

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

				
			

			

				

					weixin_42132354的博客
				

				

					08-03
					
					1329
					
				

			

		

		

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

			
		

	





	

		

			

				
					
CSS中为什么padding不生效

				
			

			

				

					weixin_49006730的博客
				

				

					12-19
					
					4101
					
				

			

		

		

			
				
CSS中为什么padding不生效，width不生效，height不生效


			
		

	



		

			
		



	

		

			

				
					
padding右边距失效问题，出现滚动条时，右边并没有出现留白

				
			

			

				

					qinleo6的博客
				

				

					04-13
					
					5605
					
				

			

		

		

			
				
需求：如下图。一个父容器，里面有一个子容器，想实现子容器和父容器之间保留20px距离。



错误方法一：自然情况下，我们会给父容器加一个padding:20px; 但是并不能实现需求，右边并不出现空白


      .father {
        height: 200px;
        width: 200px;
        border: 1px solid #000;
   ...

			
		

	





	

		

			

				
					
处理文字过长显示超出解决方案（纯css解决）

				
			

			

				

					陨落的轨迹的博客
				

				

					09-09
					
					8705
					
				

			

		

		

			
				
问题起因：做项目遇到列表下文字超长导致页面样式混乱的情况，


处理如下：
     设定每个单元格的最大宽度，max-width:
     对超出部分进行截取：overflow:hidden;    缺点：最后一个字很容易截掉一半；
     添加对超出部分添加...进行省略（兼容各个浏览器）：text-overflow:ellipsis;    缺点：只支持一行，多行的无法实现


			
		

	





	

		

			

				
					
css中设置padding无效的问题

				
			

			

				

					m0_73814236的博客
				

				

					02-16
					
					2159
					
				

			

		

		

			
				
子元素宽度设置为100%时，给子元素添加padding不生效。

			
		

	





	

		

			

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

				
			

			

				

					m0_64420071的博客
				

				

					03-13
					
					2285
					
				

			

		

		

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

			
		

	





	

		

			

				
					
自学前端第十六天:表格和input和textarea控件

				
			

			

				

					weixin_47592060的博客
				

				

					05-04
					
					990
					
				

			

		

		

			
				
一.表格 table (后期有UI/bootstrap组件辅助工具写)
一.表格概念:就是一张为 横行纵列 多行多列的单元格表

二.表格语法结构: (三层嵌套关系table>tr>td)
<table>  表格
  <tr>    行
    <td>单元格内的文字</td>  单元格/列
    ...
  </tr>
  ...
</table>


①tr 元素定义表格行(table row)
②th 元素定义表头(

			
		

	





	

		

			

				
					
前端学习笔记01---HTML5、CSS3、移动端前端基础学习知识点合集

				
			

			

				

					weixin_46615135的博客
				

				

					03-23
					
					1587
					
				

			

		

		

			
				
前端学习笔记01---HTML5、CSS3、移动端前端基础学习知识点合集

			
		

	





	

		

			

				
					
用了flex布局和overflow之后右边距失效解决办法

				
			

			

				

					一枚不断学习的小码农一枚~
				

				

					09-26
					
					1098
					
				

			

		

		

			
				
场景
项目中自己写一个轮播图，使用display:flext布局和oveflow-x:scroll等属性设置后，右边距失效了（仅在移动端）
解决办法
为div添加伪元素
 .swiperWrapper  ::after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden; //占位但不可见
  }

   .swiperWrapper {
        // backg

			
		

	





	

		

			

				
					
html为什么自动调整边距无效,**css+html为什么右侧菜单的字体大小和边距设置在失效？谁能看下*...

				
			

			

				

					weixin_40001442的博客
				

				

					06-01
					
					226
					
				

			

		

		

			
				
左侧菜单女装对应的右下侧菜单的类.rightNav和.rightNav dl以及.rightNav dd上设置的边距和字体大小不生效，只有字体颜色生效(可改)。右下侧菜单就是那些橙色字体。具体见下截屏：怎么改都不行，好像改左边的.leftNav ul li边距时，右下侧菜单会跟着改变同样的边距，字体样式如此。橙色字体菜单想改左边距为0(比如)、字号改为12px，怎么也改不了，问题在哪里？？？请各位...

			
		

	





	

		

			

				
					
CSS3 box-sizing

				
			

			

				

					weixin_34088598的博客
				

				

					05-11
					
					239
					
				

			

		

		

			
				
参考： http://www.w3school.com.cn/cssref/pr_box-sizing.asp
定义和用法


默认值： content-box
继承性： no
版本： CSS3
JavaScript 语法： object.style.boxSizing="border-box"



语法

box-sizing: content-box|borde...

			
		

	





	

		

			

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

				
			

			

				

					前端基础入门学习线路
				

				

					02-15
					
					3758
					
				

			

		

		

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

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

CSS padding 属性

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

			
		

	





	

		

			

				
					
padding 影响文本多行溢出

				
			

			

				

					Meet的博客
				

				

					12-01
					
					591
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					qq_36893834的博客
				

				

					08-02
					
					909
					
				

			

		

		

			
				
内边距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
					
					1917
					
				

			

		

		

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


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




四、margin的IE6兼容问题

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

			
		

	





	

		

			

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

				
			

			

				

					weixin_30975527的博客
				

				

					06-04
					
					3473
					
				

			

		

		

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

			
		

	





	

		

			

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

					
最新发布

				
			

			

				

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

				

					03-14
					
					2318
					
				

			

		

		

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

			
		

	





	

		

			

				
					
FireFox文本框百分比自适应padding显示bug解决方案：text-indent的应用

				
			

			

				

					
				

			

		

		

			
				
在FireFox浏览器中，开发者在设计流体布局时，可能会遇到文本框和文本域宽度100%自适应时，由于固定padding导致的问题。通常的做法是在输入元素上设置`padding-left`以保持光标与左侧边缘的距离，但在非现代浏览器...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值