CSS网页页面制做 表单button的行高难题

日期:2021-03-12 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

表单button的行高难题

下面大家先看来1个Demo的案例:

HTML Code

拷贝编码
编码以下:

<input type="submit" id="button" value="engage"/>

CSS Code

拷贝编码
编码以下:

#button {
border: 2px solid #06f;
color: #06f;
background-color: #6cf;
font: bold 12px Arial, Helvetica, sans-serif;
line-height: 50px;
}

访问器下的截图:

多实际效果图中,显著的告知大家,在Firefox和Opera访问器中都存在难题,并且致命的1点是:“不管你根据甚么方式去改动button的line-height,在Firefox和Opera访问器下都无任何实际效果。”是甚么致使的呢?(我之前从没留意到她们有这样的1个bug存在)。看了上面的文章内容我才了解,原先是访问器对界定button的line-height是不一样的,大家看来看访问器在Firefox下的分析line-height值的截图:

从图中告知大家1个道理:button的行高在Chrome/Safari/IE8等访问器分析正确的line-height(客户自定的值“50px”);而在Firefox和Opera分析的line-height确是默认设置的值,仅有“15px”。那为何会这样呢?
要回应这个难题,我回应不出来,将会您了解是为何?我只能把他作为是Firefox和Opera访问器下的1个特性,换句话便是:这两个访问器的line-height默认设置值为normal而且还加了1个“!important”,相近于:

拷贝编码
编码以下:

button, input[type="reset"], input[type="button"], input[type="submit"] {
line-height:normal !important;
}

那大家是否能够在设定值的情况下也加个“!important”处理呢?我尝试了,但是不成功了,那大家必须如何来处理呢?

怎样处理?

Rob Glazebrook在他的《The Firefox Input Button Line-Height Bug》实例教程中应用了1种方式——在button中不重设line-height的值,而是应用padding来制做同样的实际效果。这样上面的案例能够这样改动:


拷贝编码
编码以下:

#button {
border: 2px solid #06f;
color: #06f;
background-color: #6cf;
font: bold 12px Arial, Helvetica, sans-serif;
padding: 18px 6px;
}

这类方法让文字处在button的管理中心部位,尽管并不是很理想化,但大家又没法应用line-height来让他在管理中心点部位,不知道道您有木有更好的方式。假如有的话,记得与大家1起共享。欢迎随时在评价中留言。

这个相关于button的line-height的bug不知道道你之前注意了没,我是沒有发现到,这次可算是学习培训了1下,那末最终在完毕以前,大家1起谢谢为之出示的技术性连接,假如你还不太清晰我说的,并且你又对这个bug很感兴趣爱好的话,你能够移步到Rob Glazebrook的《The Firefox Input Button Line-Height Bug》。期待对大伙儿有一定的协助。