logo标签列表

有人知道为什么这个 :after CSS 在IE9中无法工作吗？

cssinternet-explorer-9pseudo-element
7

这个提交按钮 应该在左侧是圆角，在右侧是尖角。它可以在非 IE 浏览器中正常工作，但在 IE9 中无法正常工作。

如果查看开发者工具中的样式，.flat-button:after 规则中的所有内容都被划掉了，就好像被某些东西取代了一样。是什么原因呢？

<button type="submit" class="flat-button">Submit</button>
<style>
.flat-button {
    float: left;
    position: relative;
    border-top-left-radius: 5px;
    -moz-border-top-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -moz-border-bottom-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    border: none;
    padding: 0 12px;
    margin: 0 3px 3px 0;
    outline: none;
    cursor: pointer;
    color: white;
    font-family:'Trebuchet MS', Arial, helvetica, Sans-Serif;
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    text-decoration: none;
    border-collapse: separate;
    height: 26px;
    line-height: 26px;
    background: #5191cd;
}
.flat-button:hover {
    background: #1c3f95;
}
.flat-button:after {
    position: absolute;
    content: ' ';
    height: 0;
    width: 0;
    left: 100%;
    border: 13px solid transparent;
    border-left-color: #5191cd;
}
.flat-button:hover:after {
    border-left-color: #1c3f95;
}
</style>
2
如果你把<button>改成<a>，它就能工作了，所以问题应该与button有关。 - thirtydot
支持 @thirtydot 的建议，是的，使用 a 而不是 button 似乎可以工作（http://jsfiddle.net/BWC9q/7/）。BoltClock 可能会同意，也可能不会。 - Jared Farrish
那很好知道，但我想能够在没有 JavaScript 的情况下用它进行表单提交。或者有没有办法通过锚点来实现呢？ - Chris
Chris，回答你的问题，你可以使用JS在点击链接时提交表单。我知道你宁愿使用按钮，但IE在按钮支持方面存在问题。我不知道除了使用JS来掩盖这个缺陷之外还有什么好的解决方法。请参见http://jsfiddle.net/BWC9q/8/，这是一个接近但不完全的示例。 - Jared Farrish
1个回答
20
做得好，thirtydot；你是怎么想出来的？ - Jared Farrish
1
我一直在尝试各种方法。最终我发现button似乎有overflow: hidden，所以我尝试了overflow: visible，然后它就起作用了。 - thirtydot
非常酷，意想不到的是，意大利面条式编程方法竟然能够奏效。我没有达到那个水平。 - Jared Farrish
4
当有人问你是否是神时，你应该回答“是的”！ - Schwoebel
在我这种情况下，如果没有设置背景，它就不起作用。因此需要将背景设置为rgba（0,0,0,0）。 - Okendoken
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接