使用 CSS3 PIE 设置输入 [type=submit] 样式时 IE8 崩溃答案

【问题标题】：IE8 crashes when styling input[type=submit] with CSS3 PIE使用 CSS3 PIE 设置输入 [type=submit] 样式时 IE8 崩溃
【发布时间】：2012-07-16 11:38:54
【问题描述】：

有时页面可以正常工作，您需要刷新页面才能看到它崩溃。

您可以在此处查看实时示例：http://rcnhca.org.uk/sites/first_steps/account/（ie7 可以正常工作，我不支持 ie6）

我正在尝试使用以下值设置提交按钮的样式：

a.button, input.button {
    border: 2px solid #3A90A7;
    border-radius: 5px 5px 5px 5px;
    color: #202D32;
    display: block;
    float: left;
    height: 2.6em;
    line-height: 2.6em;
    margin: 0.667em 0.333em;
    padding: 0 1em;
    position: relative;
    text-decoration: none;
}

a.button:hover, input.button:hover{
    border: #202d32 solid 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 3px #FFFFFF inset;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 3px #FFFFFF inset;
}

input[type=submit] {
    behavior: url(http://rcnhca.org.uk/sites/first_steps/PIE.htc);
    position: relative;
    -pie-poll:true;
}

a.button:hover, input.button:hover{
    -pie-box-shadow: none;
}

.button {
    -pie-background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
}

.button.active {
    -pie-background: linear-gradient(top, #b7b7b7 0%,#b7b7b7 8%,#e5e5e5 8%,#ffffff 100%);
}

最后是提交按钮：

<input id="submitbtn" class="button omega" type="submit" value="Create your account" name="submit">

有谁知道导致这次崩溃的原因是什么？除了脚本导致页面运行缓慢之外，我没有得到任何信息。

【问题讨论】：

标签： javascript html internet-explorer css css3pie

【解决方案1】：

我遇到了同样的问题，我发现我的按钮在 IE8 中不起作用，因为我需要其中一个边框为none，这导致我的 CSS3PIE 崩溃。我从 border-left: none; 更改为 border-left-width: 0; 并且成功了。

【讨论】：

【解决方案2】：

我会检查和测试，但首先你需要了解一些关于 CSS3PIE 的知识

CSS3PIE 使用 VML -矢量标记语言 - 允许您使用 Javascript 绘制图形，它包含创建流行的 CSS3 类效果但有限的功能。

由于它使用Javascript来绘制图形，它占用了大量的浏览器资源，导致它挂起并最终崩溃。

我之前使用过 CSS3PIE，但在阅读了 impressive analogy by Paul Irish 后我放弃了它。您应该专注于调整您的设计以在 IE 上优雅地降级。如果您使用Modernizr 之类的东西来检查浏览器中缺少的功能并为其添加特定样式会更好。

测试后会回来

更新

我在 IE8 中测试过，是的，它崩溃了。我认为你无能为力:(

我建议您使用纯浅灰色或使用背景渐变图像。

【讨论】：

谢谢 ahmad，我确实采用了优雅降级（如果禁用 js，它会退回到纯色）并且我使用 CSS3PIE 相当谨慎，但是我的大多数访问者都在 ie7 - ie8 上，我会真的很想为他们提供更好的体验。它只会在渲染该元素时崩溃，否则它可以正常工作。与input[type=submit]有关
太好了，我没有意识到这一点。据我所知，IE7-8 上的属性选择器有问题，您可以尝试将一个类附加到它，看看它是否仍然崩溃？
对于一个类它也会崩溃，我认为它必须更多地与元素的类型提交而不是选择它的方式有关。然而，我知道人们成功地使用 PIE 设置提交按钮的样式。
你能把它从输入改成按钮吗？或者这是使用 CMS 生成的，您无法修改？
只是让您知道我发现了真正的问题，感谢您的帮助。

【解决方案3】：

通过更多的测试，我找到了这个问题的答案，它不是提交按钮，而是某种表单按钮，我给了它font-size。

如果我删除元素上的 font-size 属性，那么 IE8 将停止崩溃，我是一只快乐的兔子。

很抱歉，因为我没有包含具有字体大小的 CSS 部分（这是一个大文件，我对它感到震惊）。

【讨论】：

谢谢，现在我们知道 font-size 在与 CSS3PIE 一起使用时可能会导致 IE8 崩溃。将运行测试以确认该问题并报告给 CSS3PIE，如果它是可重现的。
@AhmadAlfy 具体来说，它可能是表单按钮元素上的字体大小，我也使用 ems 作为字体大小，但转换为整个像素值的 ems 也会导致崩溃。当提交按钮是按钮类型的输入元素时，也会发生崩溃。