Firefox の表示が他のブラウザと異なる場合は、解決してください_html/css_WEB-ITnose

他のブラウザは正常に動作します:


Firefox:



HTML コード:

<div class="v_out v_out_p"><div class="v_show"><div class="prev"><a href="javascript:void(0)"></a></div><div class="next"><a href="javascript:void(0)"></a></div><div class="v_cont"><ul><li index="0"><span class="pictitle">第1张</span><img class="bigpic" src="Uploads/2015424110501.jpg" alt="第1张" /><div class="picjianjie" style="clear:both">奥德盛员工风采1</div></li><li index="1"><span class="pictitle">第2张</span><img class="bigpic" src="Uploads/20154790605.gif" alt="第2张" /><div class="picjianjie" style="clear:both">奥德盛员工风采2</div></li><li index="2"><span class="pictitle">第3张</span><img class="bigpic" src="Uploads/20154790639.gif" alt="第3张" /><div class="picjianjie" style="clear:both">奥德盛员工风采3</div></li><li index="3"><span class="pictitle">第4张</span><img class="bigpic" src="Uploads/20154790715.gif" alt="第4张" /><div class="picjianjie" style="clear:both">奥德盛员工风采4</div></li><li index="4"><span class="pictitle">第5张</span><img class="bigpic" src="Uploads/20154790743.gif" alt="第5张" /><div class="picjianjie" style="clear:both">奥德盛员工风采五</div></li><li index="5"><span class="pictitle">第6张</span><img class="bigpic" src="Uploads/2015424110200.jpg" alt="第6张" /><div class="picjianjie" style="clear:both">奥德盛员工风采第6张</div></li></ul>     </div>     </div>    <ul class="circle" style="clear:both"><li class="circle-cur"><img class="smallpic" src="Uploads/2015424110501.jpg" alt="" /></li><li class=""><img class="smallpic" src="Uploads/20154790605.gif" alt="" /></li><li class=""><img class="smallpic" src="Uploads/20154790639.gif" alt="" /></li><li class=""><img class="smallpic" src="Uploads/20154790715.gif" alt="" /></li><li class=""><img class="smallpic" src="Uploads/20154790743.gif" alt="" /></li><li class=""><img class="smallpic" src="Uploads/2015424110200.jpg" alt="" /></li>     </ul>     </div>

CSS コード:

.v_out{width:645px;overflow:hidden;z-index:980;}.v_show{width:645px;overflow:hidden;position:relative;height:450px;z-index:990;float:left;}.v_cont{width:6450px;position:absolute;left:0px;top:0px;overflow: hidden; }.v_cont ul{float:left;text-align:center;line-height:50px;}.v_cont ul li{width:645px;height:450px;float:left;margin-top:3px;}/*---圆圈---*/.v_out_p{position:relative;overflow:visible;z-index:988;}.circle{position:relative;margin-left:40px;padding-top:25px;}.circle li{width:105px;height:60px;float:left;margin-right:10px;margin-bottom: 10px;}.circle .circle-cur{background:#f00}/*---切换---*/.prev{float:left;padding-left:0px;z-index:1000;background:url(/img/jiantou_left.png) no-repeat center;position:relative;}.next{float:right;padding-right:0px;z-index:1001;background:url(/img/jiantou_right.png) no-repeat center;position:relative;}.prev,.prev a,.next,.next a{position:relative;width:24px;height:450px;display:block;}.picjianjie{z-index:1002;padding-left:5px;color: #000000;text-align:left;width: 100%;height: 42px;line-height: 42px;position: relative;margin-top:-45px;background: url(../img/bg03.png) repeat-x;}.bigpic{width:645px;height:450px;position:relative;z-index:999;margin-top:-53px;}.smallpic{width:105px;height:60px;}.pictitle{position:relative;z-index:1003;}

ディスカッションへの返信 (解決策)

人助けてもらえますか

入れてください以下に

<style type="text/css">        * {        margin: 0;        padding: 0;    }    li {        list-style: none;    }    img.bigpic {        margin-top: 0px;        border: none 0;        display: block;    }    div.picjianjie {        background-color: orange;    }    .v_cont ul li {        position: relative;        margin-top: 0px;    }    span.pictitle,    div.picjianjie {        position: absolute;    }    div.picjianjie {        margin-top: 0px;        bottom: 0px;    }</style>

以下に入れてください

<style type="text/css">        * {        margin: 0;        padding: 0;    }    li {        list-style: none;    }    img.bigpic {        margin-top: 0px;        border: none 0;        display: block;    }    div.picjianjie {        background-color: orange;    }    .v_cont ul li {        position: relative;        margin-top: 0px;    }    span.pictitle,    div.picjianjie {        position: absolute;    }    div.picjianjie {        margin-top: 0px;        bottom: 0px;    }</style>

ありがとう、コードを貼り付けました。完璧に解決されましたが、主な問題が何なのかまだわかりません。ふふ。

以下に置いてください

<style type="text/css">        * {        margin: 0;        padding: 0;    }    li {        list-style: none;    }    img.bigpic {        margin-top: 0px;        border: none 0;        display: block;    }    div.picjianjie {        background-color: orange;    }    .v_cont ul li {        position: relative;        margin-top: 0px;    }    span.pictitle,    div.picjianjie {        position: absolute;    }    div.picjianjie {        margin-top: 0px;        bottom: 0px;    }</style>

こんにちは、まだ別の問題がありますが、あなたのコードを使用して解決されました。しかし、上の画像のタイトルはIEで開くと最初は真ん中にあったのですが、今は左側にあります。ただし、360 ブラウザと Firefox ブラウザはまだ中間にあります。


もう 1 つの既存の問題は、IE でページを開くと、ページ上のほぼすべてのテキストが数ピクセル上に移動しますが、他のブラウザでは移動しないことです。どうしたの？

たとえば、以下の 2 つの場所の比較

通常

わずかに上に移動


通常

わずかに上に移動


ご覧になるのにご協力ください、ありがとうございます。 。 。

次に、line-height を使用せず、padding を使用すると、上下が一致します。

「最初の写真」が中央に配置される問題:

    span.pictitle {        background-color: white;        width: 100%;        text-align: center;    }    .v_cont ul {        text-align: left;    }