html - IE 中的表单按钮问题

标签 html css

在 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/

相关文章:

javascript - 如何在我的网站上将 Internet 上的 JSON 文件中的数据显示为 HTML?

html - 如何在 <table> 标签内设置 <td> 项的样式?

html - li 元素换行甚至溢出 : scroll and a set width on the parent div

html - 删除空白区域 - 100% CSS HTML 页面

javascript - 复选框 ng-click 触发了两次

javascript - 动态页面 (jQuery) 没有正确加载 javascript

html - Bootstrap 4.0 - 带有图像 + 导航栏 + 全高主体的响应式标题

javascript - 如何在 Foundation 4 中的两个 6 列的 div 之间添加空白?

asp.net - 从 UserControl 链接到样式表的首选方法?

html - 具有 CSS 网格的等高不同纵横比框