今天的一个奇怪的事以及分析Ext.util.TextMetrics有
发现
。
探讨一下
:当 div 为绝对定位或者浮动的情况下(并且不设置宽度)
,div 会恰好收缩包含它的子节点。
但是 ie 系列当该 div 下的子节点有 layout (
On having layout
)
时,情况就不同了,该具有 layout 的子节点会自动扩展其宽度,并导致包含其的父节点div的所有子节点都扩展宽度至浏览器大小
。
如下面代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>宽度 测试</title>
<script type="text/javascript">
//<![CDATA[
window.onload=(function() {
alert('test width :'+document.getElementById('test').offsetWidth);
alert('test2 width :'+document.getElementById('test2').offsetWidth);
});
//]]>
</script>
</head>
<body>
<div id='test' style='border:1px solid green;position:absolute;top:100px;left:0px;height:100px;'>
<div style='float:right;'>
父节点绝对定位 : 子节点浮到右边了
</div>
<span>另一个子节点原地不动 </span>
</div>
<script type='text/javascript'>
alert('为什么不加alert,ie下绝对定位的元素会显示不出来呢');
</script>
<div id='test2' style='border:1px solid green;float:right'>
<div style='zoom:1;'>
父节点浮动处理 : 子节点 在 ie 中有了 layout
</div>
<span>另一个子节点原地不动 </span>
</div>
</body>
</html>
正常情况下:
test test2 应该紧紧包含其子节点,而不应该扩展到浏览器的宽度,这正是 firefox , opera 的表现,而 ie 系列就差强人意了。
各个浏览器的测试效果图:
IE 6 结果最不如人意:
IE 7 一个div 合格了 :
ie8 刷新前后竟然还不一样,难道 ie8 bug ( dtd
的作用- ie8 bug
):
Firefox , opera 应该都是符合标准的 :
msdn 官方解释:
HasLayout Overview
:There are also auto-sizing side effects: an element with layout cannot "shrink to fit" its children, so for example an absolute positioned box around an element with layout does not shrink to fit the layout element's children.
要解决这个问题:只能是在父节点 div 上显示设置 宽度
,这也是 Ext.util.TextMetrics 的作用,读出子节点文字应有的宽度,再重置给父节点。(Ext.util.TextMetrics 近日待具体解析)
综上所述:IE 下 Layout
(
On having layout
) 真的很重要,要重点理解。
- 大小: 10.5 KB
- 大小: 10.6 KB
- 大小: 45.7 KB
- 大小: 46 KB
- 大小: 42 KB
- 大小: 23.7 KB
分享到:
相关推荐
swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3...
Layoutit bootStrap3 拖拽功能
EXT 布局 Layout 资料EXT 布局 Layout 资料EXT 布局 Layout 资料EXT 布局 Layout 资料
esayui layout
本文详细介绍 关于 USB3.0 Layout 设计要点,包括原理图、PCB 设计、EMC防护等
ADC layout ADC layout ADC layout ADC layout
全志---音频Layout设计规范。分为:音频原理图,元器件布局,PCB走线,这3个部分介绍,学习音频必备!
What's In The Book? How did layout work before Auto Layout? Using autoresizing masks How to subclass UIView and make friends with layoutSubviews ...Layout loops...layout loops...layout loops
Layout Dependent Effect.Layout Dependent Effect. Layout Dependent Effect.Layout Dependent Effect.
有时候我们pages中不同的页面需要不同的个性化布局这时候layout就起作用了 layouts 根目录下的所有文件都属于个性化布局文件,可以在页面组件中利用 layout 属性来引用。 pages文件下组件的layout属性值为layout文件...
A10 PCB Layout Guide PCB Layout Guide
Sprint-Layout60 绝对好用 里面付详细说明 并且付目前最新最全的的元件包。
Bluetooth layout 注意事项
微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小...
ic layout
jQuery UI.Layout参数 jQuery UI.Layout Plug-in 官方站点:http://layout.jquery-dev.net/ 必须的文件:jquery.js,jquery-ui.js,jquery.layout.js
layoutit 可视化布局 bootStrap3在线编辑器源码 离线中文版
Layout
详细的usb2.0 layout 指导,layout 工程师必备
UVLayout WIN10可运行,软件支持V2左右的版本,亲测可用赶紧收藏吧