css div浮动定位 网页缩放模块错位

html-css07

css div浮动定位 网页缩放模块错位,第1张

我也是百度搜的答案：应该能解决你的问题：

在Firefox及IE8中出现同样的问题，IE7下不会出现该问题。

原因：Firefox及IE8中，在缩放网页显示比例小于100%时，对容器的border属性默认不做处理，仍为1px。这样两个div的最后总宽度仍大于外层宽度，自动溢出到下一行。

解决方法：

A：折中方法，将设置外层div的宽度稍微大些；或者在内层两个div之间多留些间距（不使用marging或paddding填充间距）。

B：在内外层容器之间添加中间层，见下文

解决案例B：

<style>

*{ margin:0padding:0}

#box{width:300pxheight:200pxmargin:0 auto}

#a{width:150pxheight:200pxfloat:left}

#a1{width:148pxheight:198pxbackground:#999border:#F00 solid 1px}

#b{width:150pxheight:200pxfloat:left}

#b1{width:148pxheight:198pxbackground:#999border:#F00 solid 1px}

</style>

<div id="box">

<div id="a"><div id="a1"></div></div>

<div id="b"><div id="b1"></div></div>

</div>

暂时试了下，

你的<a>里面有数字的会下沉，所以你需要在左右箭头里面加一些内容

例如：

<div class="paging">

<a href="#" class="pagePrev">p<b></b></a>

<a href="#">1</a>

<a href="#">2</a>

<a href="#">3</a>

<a href="#">4</a>

<a href="#">5</a>

<a href="#">6</a>

<a href="#" class="pageNext">n<b></b></a>

</div>

错位的原因我也说不清~这算是一种解决方法吧~

或者写nbsp咯~

float:right 当然会颠倒顺序

这么写应该没问题

<ul style="float:left">

    <li style="float:left>1</li>

    <li style="float:left>2</li>

    <li style="float:left>3</li>

</ul>

<ul style="float:right">

    <li style="float:left>1</li>

    <li style="float:left>2</li>

    <li style="float:left>3</li>

    <li style="float:left>4</li>

    <li style="float:left>5</li>

</ul>