Internet Explore11でmainダグ内のコンテンツが表示されない。

長くなりますが宜しくお願い致します。

前提・実現したいこと

Internet Explore 11 でmainダグ内のコンテンツをタブで切り替え表示したい。
発生している問題

Safari,Chrome,Firefox,Operaではタブで切り替え表示できているのですが
Internet Explore 11でmainダグ内のコンテンツを全て表示することができません。
試したこと

HTMLを以下の様に記述しました。

<!-- TAB CONTROLLERS ここから -->
<!-- .panel-radios -->
<input id="panel-1-ctrl" class="panel-radios" type="radio" name="tab-radios" checked>
<input id="panel-2-ctrl" class="panel-radios" type="radio" name="tab-radios">
<!-- /.panel-radios -->

<header id="introduction">
	<h1>Internet Explore11のみmainダグ内コンテンツが表示されない。</h1>
</header>
 
<!-- ul#tabs-list -->
<ul id="tabs-list">
    <!-- MENU TOGGLE -->
    <label id="open-nav-label" for="nav-ctrl"></label>
    <li id="li-for-panel-1">
      <label class="panel-label"
             for="panel-1-ctrl">タブ 1</label>
    </li><!--INLINE-BLOCK FIX --><li id="li-for-panel-2">
      <label class="panel-label"
             for="panel-2-ctrl">タブ 2</label>
    </li><!--INLINE-BLOCK FIX -->
</ul>
<!-- /ul#tabs-list -->
 
<!-- #panels -->
<article id="panels">
<!-- .container -->
	<div class="container">

		<section id="panel-1">

			<main><!-- IE11で問題のあるダグ -->
				<p>AAAAAAAAAAAAAAAA</p>
        <p>AAAAAAAAAAAAAAAA</p>
        <p>AAAAAAAAAAAAAAAA</p>
        <p>AAAAAAAAAAAAAAAA</p>
        <p>AAAAAAAAAAAAAAAA</p>
        <p>AAAAAAAAAAAAAAAA</p>
        <p>AAAAAAAAAAAAAAAA</p>
        <p>AAAAAAAAAAAAAAAA</p>
        <p>AAAAAAAAAAAAAAAA</p>
        <p>AAAAAAAAAAAAAAAA</p>
        <p>AAAAAAAAAAAAAAAA</p>
        <p>AAAAAAAAAAAAAAAA</p>
			</main><!-- IE11で問題のあるダグ -->

		</section>

		<section id="panel-2">
			<main><!-- IE11で問題のあるダグ -->
				<p>BBBBBBBBBBBBBBBB</p>
        <p>BBBBBBBBBBBBBBBB</p>
        <p>BBBBBBBBBBBBBBBB</p>
        <p>BBBBBBBBBBBBBBBB</p>
        <p>BBBBBBBBBBBBBBBB</p>
        <p>BBBBBBBBBBBBBBBB</p>
        <p>BBBBBBBBBBBBBBBB</p>
        <p>BBBBBBBBBBBBBBBB</p>
        <p>BBBBBBBBBBBBBBBB</p>
        <p>BBBBBBBBBBBBBBBB</p>
        <p>BBBBBBBBBBBBBBBB</p>
        <p>BBBBBBBBBBBBBBBB</p>
			</main><!-- IE11で問題のあるダグ -->
		</section>
	</div><!-- /.container -->
</article><!-- /#panels -->
<!-- /TAB CONTROLLERS ここまで -->

続いてCSSを以下の様に記述しました。

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400|Inconsolata);

ul#tabs-list {
 list-style: none;
 text-align: center;/*タブの位置*/
 border-bottom: 1px solid #dfdfdf;
 margin: 0 auto;
 padding: 0;  
 }

label.panel-label {
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 display: block;
 width: 100%;
 color: #bdc3c7;
 cursor: pointer;
 background-color: #ecf0f1;
 border-radius: 5px 5px 0px 0px !important;
 -webkit-transition-property: background-color, color;
 transition-property: background-color, color;
 -webkit-transition-duration: 200ms;
 transition-duration: 200ms;
 }

label.panel-label:hover {
 color: #c0392b;
 }

#panels {
 background-color: white;
 }

#panels .container {
 margin: 0 auto;
 width: 90%;
}

#panels section header label.panel-label {
 padding: 12px 24px;
 box-sizing: border-box;
}

main {
 display:block !important;
/*他のサイトにある様に追加 しかしIE11対策にならない Edgeでは他のブラウザ同様表示OKとのことですがテスト環境がない為未確認*/
 }
 
main p {
 line-height: 1.8;
 }

#panels section main {
 box-sizing: border-box;
 max-height: 0;
 opacity: 0;
 -webkit-transition: opacity 600ms;
 transition: opacity 600ms;
 overflow-y: hidden;/*or outo IE?*/
}

#panel-1-ctrl:checked ~ #panels #panel-1 main {
 max-height: initial;
 opacity: 1;
 padding: 48px 24px;
}

#panel-2-ctrl:checked ~ #panels #panel-2 main {
 max-height: initial;
 opacity: 1;
 padding: 48px 24px;
}

@media all and (max-width: 767px) {}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {
 pointer-events: none;
 cursor: default;
 -webkit-transform: translate3d(0, 1px, 0);
 transform: translate3d(0, 1px, 0);
 box-shadow: none;
 border-right: none;
 }

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1.last {
 border-right: none;
 }

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 + li {
 border-left: none;
 }

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {
 background-color: white;
 color: #c0392b;
 padding-top: 25px;
 }

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {
 pointer-events: none;
 cursor: default;
 -webkit-transform: translate3d(0, 1px, 0);
 transform: translate3d(0, 1px, 0);
 box-shadow: none;
 border-right: none;
 }

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2.last {
 border-right: none;
 }

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 + li {
 border-left: none;
 }

#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {
 background-color: white;
 color: #c0392b;
 padding-top: 25px;
 }

ul#tabs-list li {
 display: inline-block;
 text-align: center;
 font-size: 0.875em;
 width: 18%;
 box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05);
 border-right: none;
 position: relative;
 }

ul#tabs-list li:hover {
 -webkit-transition: none;
 transition: none;
 border-right: none;
 }

ul#tabs-list li:hover.last {
 border-right: none;
 }

ul#tabs-list li:hover + li {
border-left: none;
 }

ul#tabs-list li label.panel-label {
 position: relative;
 padding: 24px 0;
 }

ul#tabs-list li label.panel-label:hover {
 padding-top: 24px;
 }

#nav-ctrl {
 display: none;
 }

@media all and (min-width: 900px) {
  main {
 width: 70%;
 margin: 0 auto;
 }
}

.panel-radios {
 display: none;
 position: fixed;
 left: 50%;
 top: 10px;
 width: 20px;
 opacity: 0.5;
 z-index: 99;
 }

.panel-radios:nth-child(1) {
 -webkit-transform: translateX(-50px);
 -ms-transform: translateX(-50px);
 transform: translateX(-50px);
 }

.panel-radios:nth-child(2) {
 -webkit-transform: translateX(-30px);
 -ms-transform: translateX(-30px);
 transform: translateX(-30px);
 }

body {
 background: #e74c3c;
 color: #444444;
 font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
 }

#introduction {
 width: 90%;
 margin: 0 auto;
 padding: 48px 24px;
 color: white;
 }

#introduction h1 {
 font-weight: 300;
 text-align: center;
 }

調べたサイトを参考に以下のコードをCSSに追加

main {
    display: block;
}

しかし、こちらのコードを追加してもIE11で表示出来ませんでした。
**参考サイト : **http://qiita.com/koichi_amami/items/b70f0015ccb4b4c4eae9

テストサイトにて確認していただければ幸いです。
**テストサイトURL : **https://codepen.io/luvjapan/pen/KNZXZy

長くなりましたが以上、宜しくお願い致します。

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

回答2件

ベストアンサー

IE11ではmax-height: initial;を利用することが出来ません。
代わりにmax-height: none;を使ってみてください（2箇所）。

参考：Can I use CSS initial value

css
1@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400|Inconsolata);
2
3ul#tabs-list {
4 list-style: none;
5 text-align: center;/*タブの位置*/
6 border-bottom: 1px solid #dfdfdf;
7 margin: 0 auto;
8 padding: 0;  
9 }
10
11label.panel-label {
12 -webkit-user-select: none;
13 -moz-user-select: none;
14 -ms-user-select: none;
15 user-select: none;
16 display: block;
17 width: 100%;
18 color: #bdc3c7;
19 cursor: pointer;
20 background-color: #ecf0f1;
21 border-radius: 5px 5px 0px 0px !important;
22 -webkit-transition-property: background-color, color;
23 transition-property: background-color, color;
24 -webkit-transition-duration: 200ms;
25 transition-duration: 200ms;
26 }
27
28label.panel-label:hover {
29 color: #c0392b;
30 }
31
32#panels {
33 background-color: white;
34 }
35
36#panels .container {
37 margin: 0 auto;
38 width: 90%;
39}
40
41#panels section header label.panel-label {
42 padding: 12px 24px;
43 box-sizing: border-box;
44}
45
46main {
47 display:block !important;
48/*他のサイトにある様に追加 しかしIE11対策にならない Edgeでは他のブラウザ同様表示OKとのことですがテスト環境がない為未確認*/
49 }
50
51main p {
52 line-height: 1.8;
53 }
54
55#panels section main {
56 box-sizing: border-box;
57 max-height: 0;
58 opacity: 0;
59 -webkit-transition: opacity 600ms;
60 transition: opacity 600ms;
61 overflow-y: hidden;/*or outo IE?*/
62}
63
64#panel-1-ctrl:checked ~ #panels #panel-1 main {
65 max-height: none; /* ここと */
66 opacity: 1;
67 padding: 48px 24px;
68}
69
70#panel-2-ctrl:checked ~ #panels #panel-2 main {
71 max-height: none; /* ここ */
72 opacity: 1;
73 padding: 48px 24px;
74}
75
76@media all and (max-width: 767px) {}
77
78#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {
79 pointer-events: none;
80 cursor: default;
81 -webkit-transform: translate3d(0, 1px, 0);
82 transform: translate3d(0, 1px, 0);
83 box-shadow: none;
84 border-right: none;
85 }
86
87#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1.last {
88 border-right: none;
89 }
90
91#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 + li {
92 border-left: none;
93 }
94
95#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {
96 background-color: white;
97 color: #c0392b;
98 padding-top: 25px;
99 }
100
101#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {
102 pointer-events: none;
103 cursor: default;
104 -webkit-transform: translate3d(0, 1px, 0);
105 transform: translate3d(0, 1px, 0);
106 box-shadow: none;
107 border-right: none;
108 }
109
110#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2.last {
111 border-right: none;
112 }
113
114#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 + li {
115 border-left: none;
116 }
117
118#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {
119 background-color: white;
120 color: #c0392b;
121 padding-top: 25px;
122 }
123
124ul#tabs-list li {
125 display: inline-block;
126 text-align: center;
127 font-size: 0.875em;
128 width: 18%;
129 box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05);
130 border-right: none;
131 position: relative;
132 }
133
134ul#tabs-list li:hover {
135 -webkit-transition: none;
136 transition: none;
137 border-right: none;
138 }
139
140ul#tabs-list li:hover.last {
141 border-right: none;
142 }
143
144ul#tabs-list li:hover + li {
145border-left: none;
146 }
147
148ul#tabs-list li label.panel-label {
149 position: relative;
150 padding: 24px 0;
151 }
152
153ul#tabs-list li label.panel-label:hover {
154 padding-top: 24px;
155 }
156
157#nav-ctrl {
158 display: none;
159 }
160
161@media all and (min-width: 900px) {
162  main {
163 width: 70%;
164 margin: 0 auto;
165 }
166}
167
168.panel-radios {
169 display: none;
170 position: fixed;
171 left: 50%;
172 top: 10px;
173 width: 20px;
174 opacity: 0.5;
175 z-index: 99;
176 }
177
178.panel-radios:nth-child(1) {
179 -webkit-transform: translateX(-50px);
180 -ms-transform: translateX(-50px);
181 transform: translateX(-50px);
182 }
183
184.panel-radios:nth-child(2) {
185 -webkit-transform: translateX(-30px);
186 -ms-transform: translateX(-30px);
187 transform: translateX(-30px);
188 }
189
190body {
191 background: #e74c3c;
192 color: #444444;
193 font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
194 }
195
196#introduction {
197 width: 90%;
198 margin: 0 auto;
199 padding: 48px 24px;
200 color: white;
201 }
202
203#introduction h1 {
204 font-weight: 300;
205 text-align: center;
206 }