Question

我目前正在使用标准联系表单的网站上工作。此联系表单的按钮渲染不一致，我无法弄清楚原因，我相信它是IE Edge中的渲染错误。

<div class="col-xs-8 pull-both form-wrapper">
    <div class="col-xs-6 submit-wrapper">
        <button class="submit" type="submit">Submit your message</button>
    </div>
</div>

.col-xs-8 {
    width: 66.66666667%;
    float: right;
    position: relative;
    min-height: 1px;
    padding-left: 10px;
    padding-right: 10px;
}

.col-xs-6 {
    width: 50%;
}

.submit-wrapper {
    float: right;
    padding: 0;
}
.submit {
    background-color: #000;
    text-align: center;
    padding: 11px 0;
    text-transform: uppercase;
    font-size: 24px;
    border: 2px solid #fff;
    color: #fff;
    width: 100%;
}

在Chrome，Firefox甚至IE8中，按钮的功能与上面链接的Jsfiddle中显示的完全一致。按钮中的文本居中，当按钮太小时，“消息”一词包含在“提交您的”下方。在IE Edge中，按钮显着偏离其呈现的分钟中心，在调整按钮大小时保持偏离中心，当文本遇到按钮边缘时，它会溢出，如下面第三张图所示。是的，可以通过溢出来解决溢出：隐藏;但这只是掩盖了问题而你无法阅读所有文本。

http://i.imgur.com/XZwS9I3.jpg - 页面加载。

http://i.imgur.com/j6zukux.jpg - 1080px屏幕。

http://i.imgur.com/Wdesph2.jpg - 720px屏幕。

这可以通过禁用text-align：center;，在IE开发人员工具中修复，添加float：left;或自动换行：break-word;但这只适用于开发人员工具，在css中应用的任何这些修复都无法解决问题，即使使用！important。

是否有人能够确认这是渲染问题还是有修复问题？

IE Edge渲染按钮的方式与我尝试的其他浏览器不同（Chrome，Firefox和IE8）

0 个答案: