注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

@从前有个T

weibo.com/sysutt

 
 
 

日志

 
 
 
 

关于CSS样式中加了padding的文本框在chrome里面高度显示不正常的问题  

2012-09-28 17:32:44|  分类: CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

这几天做网页的时候遇到一个问题,在网页中本来要对文本框实现下面的效果。

于是定义了line-height:21px; height:21px; padding:10px 5px; 在IE下显示正常。

关于CSS样式中加了padding的文本框在chrome里面高度显示不正常的问题 - 瘦猴子 - 从前有个T
 
但是在firefox和chrome里面显示的是下面的效果:
关于CSS样式中加了padding的文本框在chrome里面高度显示不正常的问题 - 瘦猴子 - 从前有个T
只剩下了height,padding样式没有生效。
 
查了相关资料以后,在css里面添加了一个新的样式:box-sizing:content-box;
这是一个CSS3的属性,表示在宽度中不包括padding和border的值。
添加之后文本框在chrome里面的表现正常。不过在firefox里面仍然显示不正常。
 
后来仔细检查了html代码,发现原来是页首的声明书写有误,只写了一个<!DOCTYPE>,把它改为html5的标准声明格式<!DOCTYPE HTML>后,该问题消失,而且box-sizing这个属性也不需要添加了。
 
所以样式出现问题时,不一定是浏览器对CSS的兼容性导致的, 去html里面找找原因,说不定会有所发现。
  评论这张
 
阅读(1878)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018