IE Dimensions
来源:互联网 发布:vb和c语言 编辑:程序博客网 时间:2024/04/30 23:50
IE Dimensions
Internet Explorer (IE) dimensions as used in CSS and DHTML. IE 6 gave IE the option to render items as CSS compliant. See CSS Enhancements in Internet Explorer 6 [§].
- Box Dimension Attributes
- Read-Write Dimension Attributes
- Read-Only Dimension Attributes
- zMisc Attributes
Box Dimension Attributes
These are the usual CSS attributes that specify the dimensions of an object/element/content. These CSS Attributes have string values. These attributes can be scripted and can be used inline with HTML. There is a distinction between the size of the just the element and the size of the "box" (which includes the borders and margins).
object
.style.padding
. Transparent distance between the object and the inner edge of the border.object
.style.border
. Thickness of the border surrounding the padding and the object.object
.style.margin
. Transparent distance between the nearest object and the outer edge of the border. Themargin
attribute doesn't apply to the<body>
tag (but IE still "applies" it to the left side) or to objects with theposition
attribute set toabsolute
.
In Internet Explorer, all elements have "layout" unless the element is inline and is neither absolutely positioned or has its height or width specified.
In non-compliant IE:
body
was tied to the window and could not be resized.body
borders were rendered inside the window but outside the scroll bars sincebody
could not have its own scrollbars.body
margins only apply to the left side while actually it was inside of the border.- Positioned items without a positioned parent took
body
as the parent.
In compliant IE:
body
is withinhtml
and can be resized.body
borders are rendered inside the window and scroll bars butbody
could also have its own scrollbars.body
margins can be apply to all sides, outside of the border.- Positioned items without a positioned parent take
html
as the parent. Thehtml
tag cannot be referenced asdocument.all.html
, you will have to reference the html tag byid
. EG: Set<html id="oHtml">
, and then useoHtml.clientHeight
to get the height of the usable area of the browser window.
Read-Write Dimension Attributes
These are read-write attributes available when the position
attribute is not set to the default of static
.
- These attributes can be scripted and can be used inline with HTML. These attributes have string values.
- Position of the specified edge of the object's box relative to the same box edge of the parent positioned object in the document hierarchy. The position style attribute must be set.
object
.style.left
. Distance of the object's left from the left of the next positioned object in the document hierarchy.object
.style.top
. Distance of the object from the top of the next positioned object in the document hierarchy.object
.style.
right
. Distance of the object's right from the right of the next positioned object in the document hierarchy.object
.style.bottom
. Distance of the object's bottom the bottom of the next positioned object in the document hierarchy.
- Size of the object (and not the box). Note for IE < 6 or for IE 6+ set to non-standards compliant, then these values included the padding and border.
object
.style.height
. Distance of the object's bottom from the object's top.object
.style.width
. Distance of the object's right from the object's left.
- Position of the specified edge of the object's box relative to the same box edge of the parent positioned object in the document hierarchy. The position style attribute must be set.
- These attributes are simply variations of the above. The difference is that although they can be scripted, they CANNOT be used inline with with HTML (since they are NOT CSS attributes), and they do NOT have string values.
- These attributes have integer values.
- Position
object
.style.pixelLeft
.object
.style.pixelTop
.object
.style.pixelRight
.object
.style.pixelBottom
.
- Size
object
.style.pixelHeight
.object
.style.pixelWidth
.
- Position
- These attributes have floating point values.
- Position
object
.style.posLeft
.object
.style.posTop
.object
.style.posRight
.object
.style.posBottom
.
- Size
object
.style.posHeight
.object
.style.posWidth
.
- Position
- These attributes have integer values.
Read-Only Dimension Attributes
These are read-only attributes that can be scripted but cannot be used inline with HTML (since they are NOT CSS). These attributes are actually properties of the DHTML OM, i.e. the OM applied to Internet Explorer's HTML documents.
- "offset" indicates relative to the offsetParent while including scrollbars.
object.offsetParent
. Reference to the positioning parent of the object.- Non-compliant IE:
- For objects without out a specific positioning parent, this is
body
. - For a
td
, this istr
.
- For objects without out a specific positioning parent, this is
- Compliant IE:
- For objects without out a specific positioning parent, this is
html
. - For a
td
, this istable
.
- For objects without out a specific positioning parent, this is
- Non-compliant IE:
- Position
object
.offsetLeft
. Distance between the left most of an object/box and the left of its parent object.object
.offsetTop
. Distance between the top most of an object/box and the top of its parent object.
- Size. object + padding + border + scroll bar.
object
.offsetHeight
.object
.offsetWidth
.
- client.
- Position
object
.clientLeft
. Distance between the offsetLeft and the practical left of the object/box (object + padding). This is equal to border-left if there is one.object
.clientTop
. Distance between the offsetTop and the practical top of the object/box (object + padding). This is equal to border-top if there is one.
- Size. offset - scrollbar = object + padding + border. EG:
document.body.clientHeight
.object
.clientHeight
.object
.clientWidth
.
- Position
Here is an image borrowed directly from MSDN. Personally I think it's all screwed up.
This image, also borrowed from MSDN, clearly shows how the old IE was not CSS compliant before and how IE 6+ (with the !DOCTYPE switch thrown) correctly follows CSS.
zMisc Attributes
- Scrolling
object.style.overflow
. Read/Write. CSS for how an object utilizes scroll bars. For compliant IE, this also applies tohtml
. The possible values are:visible
. The default. Content is not clipped and no scroll bars are allowed. This usually enlarges the object as needed.scroll
. Content can be clipped and scroll bars are always added.hidden
. Content can be clipped and no scroll bars are allowed.auto
. Content can be clipped and scroll bars are added as needed.
object.style.overflowX
andobject.style.overflowY
. Read/Write. Just like overflow except that it pertains to a single axis.object.scroll
. Read/Write. Sets or retrieves how an object utilizes scroll bars. For non-compliant IE, this applied to body. For compliant IE, this applies tobody
andhtml
. The possible values are:yes
(default)no
auto
object.scrollHeight
andobject.scrollWidth
. Read only. The size of the content plus padding, esp. when the content is only partially shown because of scrolling.object.scrollLeft
andobject.scrollTop
. Read/Write. Sets or retrieves the distance between the edge of the object and the corresponding shown edge. EG: If a div has scroll bars, and you scroll to the right, then how many pixels has content of the div moved to the left?
- Mouse position. Most of these are integers indicating pixels.
event
.offsetX
andevent
.offsetY
. Read/Write. Sets or retrieves the coordinate of the mouse pointer's position relative to the object firing the event.event
.clientX
andevent
.clientY
. Read/Write. Sets or retrieves the coordinate of the mouse pointer's position relative to the client area of the window, excluding window decorations and scroll bars.event
.screenX
andevent
.screenY
. Read/Write. Retrieves the coordinate of the mouse pointer's position relative to the user's screen.window.screenLeft
andwindow.screenTop
. Read only. Retrieves the coordinate of the upper left-hand corner of the browser's client area, relative to the upper left-hand corner of the screen. The client area consists of the browser window, exclusive of the caption bar, the window-sizing border, the menu bar, the toolbars, the scroll bars, and the status bars.event.x
andevent.y
. Read/Write. Sets or retrieves the x-coordinate, in pixels, of the mouse pointer's position relative to a relatively positioned parent element.
- screen. The screen object provides some nice members.
screen.height
andscreen.width
. The resolution of the physical screen in pixels.screen.availHeight
andscreen.availWidth
. The resolution of the physical screen excluding the MS Windows taskbar.
- zMisc
object.style.zIndex
. Read/Write. Sets or retrieves the stacking order of positioned objects.auto
by default. Greater integers mean indicate more on top.
- IE Dimensions
- dimensions
- Array Dimensions
- Introduction to Dimensions
- Dimensions (Episode 204)
- JScript方法-dimensions方法
- FW - Regular Dimensions
- Slowly Changing Dimensions
- Overview of Dimensions
- Implementing Slowly Changing Dimensions
- iPad Dimensions - Landscape
- 【TOJ 1981】Tire Dimensions
- Understanding CUDA grid dimensions, block dimensions and threads organization
- 什么是退化维(Degenerate Dimensions)
- 什么是退化维(Degenerate Dimensions)
- AX2012 Import Product size dimensions
- Rotation formalisms in three dimensions
- ReactNative Demo - Dimensions 的使用
- swf文件结构解析
- 几款PHP内容管理系统介绍(PHP CMS)
- ASP.NET 的全球化体系结构(摘自MSDN)
- 得到或失去
- 图片循环渐显渐隐
- IE Dimensions
- 有趣的QQ昵称
- hibernate 定制生成流水号的序列
- Sniffer原理实现的代码
- 【原创】Tomcat性能调整
- JAVA精品网址推荐(多个站点)
- Runtime Web.config / App.config Editing
- VB实现SQL Server数据库备份/恢复
- 很高兴今天进入成都微软技术中心实习!