`
caiceclb
  • 浏览: 241940 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

IE对百分比宽度的理解。。。貌似很囧

阅读更多

布局的时候貌似发现ie对百分比的宽度计算有点问题,Google之。果然。。。

 

http://www.liehuo.net/a/200908/237911.html 写道
IE与firefox对百分比宽度解析存在细小差异,假设一个DIV宽度800px。里面有8个字DIV等宽依次浮动,可以这么写。
以下为引用的内容:
.out{width:777px;}
.out .in{width:12.5%; height:20px; float:left;}


  html代码:
以下为引用的内容:
<div class="out">
<div class="in"></div><div class="in"></div><div class="in"></div><div class="in"></div><div class="in"></div><div class="in"></div><div class="in"></div><div class="in"></div>
</div>



  照我们的理解:12.5% * 8正好为100%嘛!所以内部8个DIV的宽度一起浮动总宽度应该正好等于外部DIV的宽度的。

  ok,想法毕竟是想法,而事实上:火狐下是这样子,但是IE,不好意思,不是这样的。

  这里我没有计算,数据或许有不准,但是原理是实践过滴。

  IE算百分比的时候完全取整的。

  777px*12.5%=97.125

  IE会取整,于是为97px,8个累加就是776px,结果总长少了1px。

  同样的,如果外部DIV宽度为772,则

  772 * 12.5%=96.5px,取97px,结果776px,总长长了4px。

  这是我在写自适应页面时遇到的一个比较头疼的问题。问题原因是知道了,如何解决还没有想到很好的方法。

  firefox下表现很好。IE,叹息!
 
分享到:
评论

相关推荐

    表格设置table-layout:fixed后对单元格宽度设置无效

    文档中给出了示例代码,通过为每一列指定具体的宽度百分比,可以确保列宽按照指定的宽度显示,而不是被均等分配。 第二种解决方法是,通过添加一个不可见的行来指定列宽。这种方法利用了浏览器渲染引擎在处理表格...

    android百分比布局自动适配

    它们继承自`RelativeLayout`和`FrameLayout`,并扩展了对百分比尺寸的支持。通过在XML布局文件中使用`android.support.percent`命名空间,我们可以设置子视图的宽度和高度以父视图的百分比来计算。 例如,要创建一...

    css+div自适应窗口宽度

    接着是`width: expression(document.body.clientWidth )`这一行,这是IE浏览器特有的表达式语法,它检查当前浏览器窗口的宽度。如果宽度小于760像素,div元素的宽度将设置为760像素;否则,它将占据100%的浏览器宽度...

    页面出现滚动条的时候如何让滚动条不影响页面宽度

    例如,在浏览器窗口大小变化时,原本使用百分比宽度设置的div等元素可能会因为无法自动居中而出现布局问题。因为之前多出的滚动条空间被隐藏了,所以现在不能使用margin:auto进行自动居中。 总结来说,为了使滚动...

    css控制div的宽度

    首先,要理解CSS中的“宽度”属性(width),它是用来设定元素内容区域的宽度,不包括内边距(padding)、边框(border)和外边距(margin)。设置div的宽度可以帮助我们精确地调整元素在页面上的展示大小,从而实现...

    如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器.docx

    让 Div+CSS 兼容 IE6 IE7 IE8 IE9 和 FireFox Chrome 等浏览器 在前端开发中,让 Div+CSS 兼容不同的浏览器是一个很大的挑战。不同的浏览器有不同的渲染引擎和CSS解析规则,导致了同一份CSS代码在不同的浏览器中...

    多种方法解决min-width 不兼容ie6的问题

    这段代码中,我们不仅设置了宽度为 100% 和最小宽度为 980px,还通过 _width 表达式来确保在 IE6/IE7 中元素的宽度不会小于 980px。 需要注意的是,上述解决方案中使用的表达式和私有属性,虽然可以在 IE6 中实现...

    CSS兼容IE8代码

    在IE8中,使用em或百分比单位可能导致布局问题,因为IE8的字体大小计算方式与其他浏览器不同。可以使用像素作为主要单位,并在需要时转换。 10. ** normalize.css**: 使用`normalize.css`或`reset.css`可以帮助...

    数据表格JqGrid自适应列宽度

    本文将深入探讨“数据表格JqGrid自适应列宽度”这一主题,以帮助开发者更好地理解和实现这一功能。 首先,JqGrid允许用户根据屏幕尺寸或窗口大小自动调整列宽,以优化用户体验。这种自适应性是现代Web应用中必不可...

    css常见的bug(ie)

    IE在处理百分比单位时可能存在不一致,确保所有父级元素的大小可控以防止布局混乱。可以使用`!important`在其他浏览器中保持百分比单位,但在IE6中使用绝对像素值。 4. **DOCTYPE的使用**: 总是在HTML文档开头...

    div宽度自适应布局(右边自适应)

    9. **百分比与视口单位**: 除了百分比,还可以使用视口相关的单位如`vw`(视口宽度的百分比)和`vh`(视口高度的百分比),使`div`宽度与浏览器视口大小关联,实现更灵活的自适应效果。 10. **浏览器兼容性**: 在实际...

    解决layui-table单元格设置为百分比在ie8下不能自适应的问题

    在现代浏览器中,设置单元格为百分比宽度可以很好地实现自适应效果,但在IE8中,这种特性可能不被支持,导致表格无法正确调整大小。 针对这个问题,有以下两种解决方案: 1. **固定宽度**: 如果你的应用不采用...

    CSS 实现div宽度根据内容自适应

    3. **百分比宽度**:如果知道内容的最大宽度,可以设置一个最大宽度(如`max-width`),然后将宽度设为百分比,这样当内容超过最大宽度时,div会自适应内容宽度,但不超过设定的最大值。 总结来说,CSS实现div宽度...

    min-width For ie6 与传统事件阻止

    `,但是这种方法只对固定宽度有效,对百分比宽度无效。 2. 利用`expression`表达式,例如`width: expression(this.offsetWidth );`,这种方式动态计算元素宽度,但性能较差且存在兼容性问题。 3. 使用JavaScript进行...

    FF和IE兼容性问题

    FF使用`opacity`属性,而IE8及以下版本使用`filter: alpha(opacity=XX)`,其中`XX`代表0到100的透明度百分比。 4. **伪类选择器** FF和其他现代浏览器支持`:hover`、`:active`和`:focus`等伪类,但IE6只支持`:...

    div宽度自适应布局(左边自适应)

    右侧`div`则可以用于侧边栏,展示辅助信息,如广告、链接列表等,其宽度通常设定为固定值或者使用百分比,以保持在页面中的相对位置不变。 四、CSS Flexbox布局 现代浏览器支持的Flexbox(弹性盒模型)提供了一种更...

    人教版六年级上册数学第六单元百分数(一)单元达标检测卷.pdf

    第*单元主要围绕百分数展开,内容涵盖了将不同数值形式转换为百分数,利用百分数解决问题以及对百分数的理解和运算。 知识点一:百分数的基本概念与转换 在题目中出现的第一部分是关于整数、小数、分数与百分数之间...

    table自动宽度拉伸

    例如,将表格的列宽设置为百分比,这样表格的宽度会根据其容器的宽度自动变化。 ```html ;"&gt; ;"&gt;Column 1 ;"&gt;Column 2 ;"&gt;Column 3 ;"&gt;Column 4 ``` 然而,这种方法虽然能实现基本的自适应,但在某些情况...

    根据屏幕宽度及展示内容换行

    首先,我们需要理解屏幕宽度的概念。在Android设备上,屏幕宽度指的是用户界面水平方向上的可用像素数量。它决定了可以并排显示多少内容。不同的设备可能具有不同的屏幕宽度,因此,适应性布局是必要的,以确保内容...

Global site tag (gtag.js) - Google Analytics