Firefox/IE 填充/边距修复 [关闭]

Posted 2023-03-06

【中文标题】Firefox/IE 填充/边距修复 [关闭]

【英文标题】：Firefox/IE Padding/Margin Fix [closed]

【发布时间】：2014-09-17 16:31:20

【问题描述】：

美丽的人，

在我的一生中，我无法使用 Bootstrap 在 IE 和 Firefox 中正确格式化按钮。我在这里寻找有类似问题的人，但我似乎无法舔这个。任何帮助将不胜感激。我已经在 MeteorJS 中创建了这个网站，以防万一为您提供任何见解：

http://jdd.meteor.com/search

*在 Chrome、Safari、ios 设备上运行良好...

【问题讨论】：

标记为“离题”：通过查看 Chrome 中提供的链接可以找到所需的行为。我希望文本浮动中心，并对齐中心。它在 IE/Firefox 中没有这样做。至于重现问题所需的最短代码，这很困难，因为我正在使用引导程序（如前所述），而且我的 SASS 文件非常大，并且对于按钮类的每个实例都因页面而异。史蒂夫似乎明白我的问题。但是，我仍在努力获得 ABOVE 所需的行为......

【参考方案1】：

---

我制作了您的表单的简化版。我解决这个问题的方法是使用 firefox 的强制行高作为应用样式的基础。我记得默认是正常的。

因此，您不必设置高度和行高来匹配它，这对我来说是最一致的跨浏览器解决方案，没有任何奇怪之处。

我使用前缀外观规则，因为它删除了应用于该元素的所有默认浏览器样式。在 Mobile Safari 中尤其需要它。

http://codepen.io/stevemckinney/pen/CLgdE

input 
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    background: #EFEFEF;


input,
.btn 
    line-height: normal;
    padding: 10px;


.btn 
    text-decoration: none;


.btn-primary 
    background: #820024;
    color: white;

希望这会有所帮助。