Firefox displays differently than other browsers, please solve it_html/css_WEB-ITnose

Other browsers work fine:


Firefox:



HTML code:

<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 lazy"  src="/static/imghwm/default1.png"  data-src="Uploads/2015424110501.jpg"    alt="第1张" /><div class="picjianjie"   style="max-width:90%">奥德盛员工风采1</div></li><li index="1"><span class="pictitle">第2张</span><img class="bigpic lazy"  src="/static/imghwm/default1.png"  data-src="Uploads/20154790605.gif"    alt="第2张" /><div class="picjianjie"   style="max-width:90%">奥德盛员工风采2</div></li><li index="2"><span class="pictitle">第3张</span><img class="bigpic lazy"  src="/static/imghwm/default1.png"  data-src="Uploads/20154790639.gif"    alt="第3张" /><div class="picjianjie"   style="max-width:90%">奥德盛员工风采3</div></li><li index="3"><span class="pictitle">第4张</span><img class="bigpic lazy"  src="/static/imghwm/default1.png"  data-src="Uploads/20154790715.gif"    alt="第4张" /><div class="picjianjie"   style="max-width:90%">奥德盛员工风采4</div></li><li index="4"><span class="pictitle">第5张</span><img class="bigpic lazy"  src="/static/imghwm/default1.png"  data-src="Uploads/20154790743.gif"    alt="第5张" /><div class="picjianjie"   style="max-width:90%">奥德盛员工风采五</div></li><li index="5"><span class="pictitle">第6张</span><img class="bigpic lazy"  src="/static/imghwm/default1.png"  data-src="Uploads/2015424110200.jpg"    alt="第6张" /><div class="picjianjie"   style="max-width:90%">奥德盛员工风采第6张</div></li></ul>     </div>     </div>    <ul class="circle" style="clear:both"><li class="circle-cur"><img class="smallpic lazy"  src="/static/imghwm/default1.png"  data-src="Uploads/2015424110501.jpg"    alt="" /></li><li class=""><img class="smallpic lazy"  src="/static/imghwm/default1.png"  data-src="Uploads/20154790605.gif"    alt="" /></li><li class=""><img class="smallpic lazy"  src="/static/imghwm/default1.png"  data-src="Uploads/20154790639.gif"    alt="" /></li><li class=""><img class="smallpic lazy"  src="/static/imghwm/default1.png"  data-src="Uploads/20154790715.gif"    alt="" /></li><li class=""><img class="smallpic lazy"  src="/static/imghwm/default1.png"  data-src="Uploads/20154790743.gif"    alt="" /></li><li class=""><img class="smallpic lazy"  src="/static/imghwm/default1.png"  data-src="Uploads/2015424110200.jpg"    alt="" /></li>     </ul>     </div>

CSS code :

.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;}

Reply to discussion (solution)

Can anyone help?

Put it below

<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>

Post it below

<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>

Thank you, I posted your code, it’s a perfect solution, but I still don’t know What is the main problem! hehe.

Put it below

<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>

Hello, there is another problem, which has been solved using your code. But the title of the picture above, when opened with IE, was originally in the middle, but now it is on the left. However, 360 and Firefox browsers are still in the middle.


Another existing problem is that when the page is opened in IE, almost all the text on the page moves up a few pixels, but other browsers do not. What's going on?

For example, the comparison between the two places below

Normal

Slightly moved upwards


Normal

Slightly upward Moved


Please help me take a look, thank you. . .

Then don’t use line-height, use padding, and the top and bottom will be consistent.

The problem with the "first picture" being centered:

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