布局的时候貌似发现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,叹息!
分享到:
相关推荐
文档中给出了示例代码,通过为每一列指定具体的宽度百分比,可以确保列宽按照指定的宽度显示,而不是被均等分配。 第二种解决方法是,通过添加一个不可见的行来指定列宽。这种方法利用了浏览器渲染引擎在处理表格...
它们继承自`RelativeLayout`和`FrameLayout`,并扩展了对百分比尺寸的支持。通过在XML布局文件中使用`android.support.percent`命名空间,我们可以设置子视图的宽度和高度以父视图的百分比来计算。 例如,要创建一...
接着是`width: expression(document.body.clientWidth )`这一行,这是IE浏览器特有的表达式语法,它检查当前浏览器窗口的宽度。如果宽度小于760像素,div元素的宽度将设置为760像素;否则,它将占据100%的浏览器宽度...
例如,在浏览器窗口大小变化时,原本使用百分比宽度设置的div等元素可能会因为无法自动居中而出现布局问题。因为之前多出的滚动条空间被隐藏了,所以现在不能使用margin:auto进行自动居中。 总结来说,为了使滚动...
首先,要理解CSS中的“宽度”属性(width),它是用来设定元素内容区域的宽度,不包括内边距(padding)、边框(border)和外边距(margin)。设置div的宽度可以帮助我们精确地调整元素在页面上的展示大小,从而实现...
让 Div+CSS 兼容 IE6 IE7 IE8 IE9 和 FireFox Chrome 等浏览器 在前端开发中,让 Div+CSS 兼容不同的浏览器是一个很大的挑战。不同的浏览器有不同的渲染引擎和CSS解析规则,导致了同一份CSS代码在不同的浏览器中...
这段代码中,我们不仅设置了宽度为 100% 和最小宽度为 980px,还通过 _width 表达式来确保在 IE6/IE7 中元素的宽度不会小于 980px。 需要注意的是,上述解决方案中使用的表达式和私有属性,虽然可以在 IE6 中实现...
在IE8中,使用em或百分比单位可能导致布局问题,因为IE8的字体大小计算方式与其他浏览器不同。可以使用像素作为主要单位,并在需要时转换。 10. ** normalize.css**: 使用`normalize.css`或`reset.css`可以帮助...
本文将深入探讨“数据表格JqGrid自适应列宽度”这一主题,以帮助开发者更好地理解和实现这一功能。 首先,JqGrid允许用户根据屏幕尺寸或窗口大小自动调整列宽,以优化用户体验。这种自适应性是现代Web应用中必不可...
IE在处理百分比单位时可能存在不一致,确保所有父级元素的大小可控以防止布局混乱。可以使用`!important`在其他浏览器中保持百分比单位,但在IE6中使用绝对像素值。 4. **DOCTYPE的使用**: 总是在HTML文档开头...
9. **百分比与视口单位**: 除了百分比,还可以使用视口相关的单位如`vw`(视口宽度的百分比)和`vh`(视口高度的百分比),使`div`宽度与浏览器视口大小关联,实现更灵活的自适应效果。 10. **浏览器兼容性**: 在实际...
在现代浏览器中,设置单元格为百分比宽度可以很好地实现自适应效果,但在IE8中,这种特性可能不被支持,导致表格无法正确调整大小。 针对这个问题,有以下两种解决方案: 1. **固定宽度**: 如果你的应用不采用...
3. **百分比宽度**:如果知道内容的最大宽度,可以设置一个最大宽度(如`max-width`),然后将宽度设为百分比,这样当内容超过最大宽度时,div会自适应内容宽度,但不超过设定的最大值。 总结来说,CSS实现div宽度...
`,但是这种方法只对固定宽度有效,对百分比宽度无效。 2. 利用`expression`表达式,例如`width: expression(this.offsetWidth );`,这种方式动态计算元素宽度,但性能较差且存在兼容性问题。 3. 使用JavaScript进行...
FF使用`opacity`属性,而IE8及以下版本使用`filter: alpha(opacity=XX)`,其中`XX`代表0到100的透明度百分比。 4. **伪类选择器** FF和其他现代浏览器支持`:hover`、`:active`和`:focus`等伪类,但IE6只支持`:...
右侧`div`则可以用于侧边栏,展示辅助信息,如广告、链接列表等,其宽度通常设定为固定值或者使用百分比,以保持在页面中的相对位置不变。 四、CSS Flexbox布局 现代浏览器支持的Flexbox(弹性盒模型)提供了一种更...
第*单元主要围绕百分数展开,内容涵盖了将不同数值形式转换为百分数,利用百分数解决问题以及对百分数的理解和运算。 知识点一:百分数的基本概念与转换 在题目中出现的第一部分是关于整数、小数、分数与百分数之间...
例如,将表格的列宽设置为百分比,这样表格的宽度会根据其容器的宽度自动变化。 ```html ;"> ;">Column 1 ;">Column 2 ;">Column 3 ;">Column 4 ``` 然而,这种方法虽然能实现基本的自适应,但在某些情况...
首先,我们需要理解屏幕宽度的概念。在Android设备上,屏幕宽度指的是用户界面水平方向上的可用像素数量。它决定了可以并排显示多少内容。不同的设备可能具有不同的屏幕宽度,因此,适应性布局是必要的,以确保内容...