在 Chrome 和 Firefox 中,按钮中的文本被换行并占用两行。 但是在 Internet Explorer 中,按钮中的文本没有换行,而是扩展了按钮。
见按钮下载 4.99 美元 http://www.manual-buddy.com/p/technics/rs1500usvolume1-service-manual.html
CSS:
.paypalOrderSubmitButton {
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
line-height: 100%;
font-weight: normal;
border-radius: 0.5em;
padding: .5em 2em .55em;
text-align: center;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: white!important;
border: solid 1px #DA7C0C;
background: #FAA51A;
white-space: normal;
}
谢谢
最佳答案
填充导致按钮在 IE 中扩展,因为 IE 将添加填充像素。
您可以使用条件标记来添加 ie 类,具体取决于哪个 IE 浏览器。然后使用特定类覆盖您现有的类以修复 IE 问题。
<!--[if IE ]><![endif]-->
<!doctype html>
<!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
然后在你的css文件中,你需要写一些代码,比如:
.ie7 .paypalOrderSubmitButton,
.ie8 .paypalOrderSubmitButton,
.ie9 .paypalOrderSubmitButton {
width: 120px;
}
您可以设置宽度,或者对于 IE 浏览器,您只需将 padding 设置为 0。
这是一种解决 IE 问题的轻量级方法。
关于html - IE 中的表单按钮问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19160383/