Internet Explorer 9 - 11忽略了<a href="https://github.com/levigross/Scapy/blob/master/scapy/packet.py#L262" rel="nofollow noreferrer">overloaded</a> <p> <a> element

Question

Why the heck is IE (I care for at least versions 10 and up) ignoring only padding-right on my a element?

CSS:

.button { position:relative; display:inline-block; padding: 6px 50px 6px
 15px; margin:20px 10px 20px 0px; text-decoration:none; font-family: 
'Cormorant', serif; font-size:13px; line-height:24px; font-weight:400; 
color:#000; border: 4px double; text-transform:uppercase; font-weight:700; 
text-align:center; transition: all 0.25s; }

.button:before { position:absolute; right:0; top:0; width:30px; 
height:100%; background:#000; content:""; transition: all 0.25s; }

.button:after { position:absolute; right:7px; top:50%; margin-top:-11px; 
font-family:"Flaticon"; content: "\f104"; color:#fff }

HTML

<a class="button" href="#">View 
Safari</a>

What the button is supposed to look like:

中的填充权限

但在IE中：

但是没有伪元素，IE中似乎有一个“默认”右边填充：

我希望旧版本的IE（如8及以下版本）能够吸引这种迟钝的BS而不是10及以上！

之前有没有人经历过这个，因为我找不到SO的工作解决方案？

Answer 1

该死的我说得太早!!只是看看我的样式表，看看是否有任何冲突导致这个问题，我发现这个旧IE浏览器我几年前必须放入 - 我从未真正注意到（或关心），因为它与IE有关。

所以对于那些遇到过这个问题的人来说，在我的案例中寻找像这样的任何俗气的IE黑客：

/* INTERNET EXPLORER 8 */

.button {background-image:none\0/; padding-right: 20px\0/;}

IE仍然是我们不得不首先制造这些愚蠢的黑客的错！很高兴它是2017年（不像2012年左右）