ホームページでローカルでは表示されるタブがサーバー上では反映されない

ホームページでローカルでは表示されるタブがサーバー上では反映されず、タブの表示が崩れます。

な何が間違っているのでしょうか？

ちなみにURLは
http://3kaduki.link/index2.html
です。

うまくいっているローカルのスクショをつけます。

css
/* ▼タブ機能を制御するラジオボタン(非表示にする) */
.tabbox input { display: none; }
/* ▼タブ(共通装飾＋非選択状態の装飾) */
.tab {
display: inline-block; /* インラインブロック化 */
border-width: 2px 2px 0px 2px; /* 上側と左右に枠線を引く */
border-style: solid; /* 枠線の種類は「実線」 */
border-color: skyblue; /* 枠線の色は「黒」 */
border-radius: 0.75em 0.75em 0px 0px; /* 左上と右上の角だけを丸くする */
padding: 0.75em 1em; /* 内側の余白量 */
font-weight: bold; /* タブの文字を太字にする */
color: #337ab7; /* タブの文字色：黒色 */
background-color: #ddcccc; /* ・EE^ブの(非選択状態の)背景色：灰色 */
}

/* ▼タブにマウスポインタが載った際の装飾 */
.tab:hover {
color: green; /* タブの文字色：緑色 */
background-color: #ccffcc; /* タブの背景色：淡い緑色 */
cursor: pointer; /* マウスポインタの形状を「指(指し示す形)」にする */
}

/* ▼選択状態のタブ(＝チェックが入っているラジオボタンの隣にあるタブの装飾) */
input:checked + .tab {
color: #FFFFFF; /* タブの文字色：赤色 */
background-color: #337ab7; /* タブの背景色：淡い黄色 */
}

/* ▼タブの中身(共通装飾＋非選択状態の装飾) */
.tabcontent {
display: none; /* 標準では非表示にする */
color: #FFFFFF; /* タブの文字色：赤色 */
border: 2px solid skyblue; /* 枠線を引く：黒色で1ピクセルの実線 */
padding: 1em; /* 内側の余白量 */
background-color: #337ab7; /* 背景色：淡い黄色(※選択中のタブの背景色と合わせます) */
}

/* ▼チェックが入っているラジオボタンに対応するタブの中身を表示する */
#abo:checked ~ #tabcontent1 { display: block; }
#km:checked ~ #tabcontent2 { display: block; }
#kp:checked ~ #tabcontent3 { display: block; }
#fu:checked ~ #tabcontent4 { display: block; }
/* ▼チェックが入っているラジオボタンの隣にあるタブの装飾(＝選択状態のタブ) */
input:checked + .tab {
z-index: 10; /* ※2A */
position: relative; /* ※3 */
}
/* ▼タブの中身(共通装飾＋非選択状態の装飾) */
.tabcontent {
margin-top: -1px; /* ※1 */
z-index: 0; /* ※2B */
position: relative; /* ※3 */
}

HTML

<div class="tabbox">
<input type="radio" name="tabset" id="abo" checked>
<label for="abo" class="tab">† 三日月少女革命 †</label>

<input type="radio" name="tabset" id="km">
<label for="km" class="tab">代表</label>

<input type="radio" name="tabset" id="kp">
<label for="kp" class="tab">出版社情報</label>

<input type="radio" name="tabset" id="fu">
<label for="fu" class="tab">未来に</label>
<div class="tabcontent" id="tabcontent1">
<p>†　三日月少女革命　†は自己実現・社会変革を目指すミカヅキカゲリのひとりきりプロヂェクト。<BR>
ちいさな出版社です。</p>
</div>
<div class="tabcontent" id="tabcontent2"><div class="clearfix">
<img src="./img/km.jpg" align="right" class="img-responsive img-circle" alt="ミカヅキカゲリ">
† 三日月少女革命 †　代表<BR>
ミカヅキカゲリ　（みかづきかげり）</div>
</div>
<div class="tabcontent" id="tabcontent3">

<div class="table-responsive">
<table class="table table-striped table-hover">
<tr class="success"><th> 名称 </th><td> 三日月少女革命 </td></tr>
<tr><th> E-MAIL </th><td> revolution★3kaduki.girly.jp </td></tr>
<tr class="success"><th> URL </th><td> http://3kaduki.link/ </td></tr>
<tr><th> FAX </th><td></td></tr>
<tr class="success"><th> 出版社記号 </th><td> 909036 </td></tr>
<tr><th> 郵便振替（加入者） </th><td> 三日月少女革命 </td></tr>
<tr class="success"><th> 郵便振替（口座番号） </th><td> 01730-8-72804 </td></tr>
<tr><th> 他行からの振替（銀行・支店名） </th><td> ゆうちょ銀行179支店 </td></tr>
<tr class="success"><th> 他行からの振替（口座番号） </th><td> （当座） 0072804 </td></tr>
</table>
</div>

</div>
<div class="tabcontent" id="tabcontent4">[空をあきらめない]<BR>
<BR>
歩けなくなって<BR>
わたしの翼は折れてしまったのだと思った<BR>
もはや空をあきらめるしかないのだと<BR>
<BR>
だけど<BR>
空をあきらめなくてもいいことを<BR>
折れた翼は繕えることを<BR>
わたしは知ってしまった<BR>
<BR>
だから<BR>
今は繕いつつ朝を待っているところ<BR>
<BR>
朝になれば<BR>
空を目指すよ<BR>
この赤い車椅子で<BR>
<BR>
空を<BR>
人生を<BR>
自分を<BR>
あきらめないよ</div>
</div>




よろしくおねがいします

No.3 ベストアンサー 回答者： fujillin 回答日時： 2018/05/24 13:52

こんにちは

fx60、Chrome66、IE11で見てみましたが、タブは一応機能しているようです。

キャッシュのクリアなどをして、再確認してみては？

この回答へのお礼

ありがとうございます。
キャッシュをクリアして試したところ、正常に表示されてました。
お手数をおかけしました。

お礼日時：2018/05/24 15:30

No.2 回答者： t_fumiaki 回答日時： 2018/05/24 13:18

firefox、IEでも正常に表示される。

他は試してない。

この回答へのお礼

ありがとうございました。キャッシュの問題だったようです。

お礼日時：2018/05/24 15:32

No.1 回答者： tknakamuri 回答日時： 2018/05/24 13:03

異常無いけどブラウザは何?

当方 zenpad3のchrome

この回答へのお礼

ありがとうございました。Chromeです。
キャッシュがおかしかったみたいです。

お礼日時：2018/05/24 15:33