IE11だけborderが表示されません！！

下記のボタンがあるのですが、なぜかIE11で見るとborderが消えます・・・。
ちなみhoverアクションは動作します。ここにはhover時のcssは記載していませんが。

html
1<a href="http://*****" class="link1_new">more</a>

css
1link1_new{
2    display: inline-block;
3    width: 280px;
4    height: 50px;
5    text-align: center;
6    text-decoration: none;
7    outline: none;
8    position: relative;
9    z-index: 2;
10    background-color: #FFF;
11    border: 1px solid#545454;
12    color: #545454;
13    line-height: 50px;
14}
15
16.link1_new, .link1_new::before, .link1_new::after {
17    -webkit-box-sizing: border-box;
18    -moz-box-sizing: border-box;
19    -ms-box-sizing: border-box;
20    box-sizing: border-box;
21    -webkit-transition: all .3s;
22    transition: all .3s;
23    position: absolute;
24    z-index: -1;
25    display: block;
26    content: '';
27    top: 20px;
28    top: 0;
29    width: 50%;
30    height: 100%;
31    background-color: #fff;
32}
33
34.link1_new::before {
35    right: 0;
36}
37
38.link1_new::after {
39    left: 0;
40}
41
42
43

kei344

2018/01/07 05:10

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

退会済みユーザー

2018/01/19 00:50

失礼しました。知らなかったです。ありがとうございます。

行動規範の内容に同意します

回答1件

ベストアンサー

CSS
1link1_new{/* 先頭に「.」が無い */
2    display: inline-block;
3    width: 280px;
4    height: 50px;
5    text-align: center;
6    text-decoration: none;
7    outline: none;
8    position: relative;
9    z-index: 2;
10    background-color: #FFF;
11    border: 1px solid#545454;/* solidと#545454の間にスペースが無い */
12    color: #545454;
13    line-height: 50px;
14}
15```**動くサンプル：**[https://jsfiddle.net/bvrr7vq4/](https://jsfiddle.net/bvrr7vq4/)