`
presses
  • 浏览: 116059 次
  • 性别: Icon_minigender_1
  • 来自: 中山
社区版块
存档分类
最新评论

布局-ie6下的top和bottom不能同时起作用。

IE 
阅读更多
一、使用position+top/bottom/left/right布局时可以忽略block元素换行的影响。

二、浮动布局在三列的情况下不能实现左右两列固定大小，中间填充的效果。(postion可以）。

三、使用position布局时，在IE6中，对同一对像不能同时使用top/bottom，但可以同时使用left/right。

四、使用position布局时应该先在父容器中设置好position:absolute，然后在本对像中也设置好position:absolute。

五、三列布局，且左右两边大小固定，中间填充的方法是左边设置top/left,右边设置right/top。而中间设置top/left/right，并且一定要把width设为100%。

六、在ie6中需要在body中设置height:100%才能在垂直布局中使对像申展到预期frame的大小。

七、关于ie hack。ie7只认*，ie6认_和*。
分享到：
| 11. TYPE, STYLES & TYPOGRAPHY
评论
1 楼 yangxue_521521 2014-01-03  
第4条，我有异议，父容器应该设置position:relative ,同级设置 position:absolute ，应该是这样吧
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    垂直居中布局 Vertical-aligned 应用测试：兼容IE6/8/FF

    "垂直居中布局 Vertical-aligned 应用测试：兼容IE6/8/FF"这个主题涉及到如何在各种浏览器环境下，包括Firefox和较旧的Internet Explorer版本，实现元素的完美垂直居中。 在CSS中，传统的垂直居中方法可能包括使用...

    IE6下fixed实现头部定位

    总的来说，解决IE6下的`fixed`定位问题需要对CSS和JavaScript有深入的理解，以及对老版本浏览器特性的熟悉。虽然现在IE6的使用率已经非常低，但对于那些仍需支持它的网站，这些解决方案仍然具有价值。通过学习和应用...

    margin-left和right失效(斯芬克斯)之谜

    一种情况是元素的确不支持margin-top/bottom(参看：关于margin-top/bottom在inline元素（non-Replaced）上不起作用的解释); 另一种情况则是元素产生了margin叠加（参看：如何避开麻烦的margin叠加(margin collapsing...

    IE不支持的集中css

    Outline属性在不改变元素布局的情况下提供边框，这对于调试非常有用。然而，IE6和IE7不支持此属性，因此在这些浏览器中无法用作调试工具。 2. **Inherit（值）** Inherit值允许元素继承其父元素的某些样式，减少...

    ie6下定位bug解决

    在其他现代浏览器中，CSS的`position`属性如`relative`、`absolute`和`fixed`能很好地实现元素的定位，但在IE6中，这些属性的处理方式却大不相同，导致开发者需要进行特殊的“hack”来解决这些问题。 首先，IE6不...

    CSS教程:网页布局定位及z-index解释

    在网页设计中，CSS（Cascading Style Sheets）起着至关重要的作用，它负责定义页面的样式和布局。本文将深入探讨CSS中的两个关键概念——网页布局定位与`z-index`属性，帮助你理解如何有效地控制元素在页面上的位置...

    margin值在IE6变成双倍

    这种现象并不影响垂直方向的外边距（margin-top 和 margin-bottom）。 这个问题的出现主要是由于IE6对盒模型的理解与W3C标准不一致导致的。IE6使用的是“怪异盒模型”（Quirks Mode），其中元素的宽度包括了内边距...

    第52章 布局相关的样式-盒布局

    - `padding`、`padding-top`、`padding-right`、`padding-bottom` 和 `padding-left` 控制内填充。 - `border-width`、`border-style` 和 `border-color` 用于定义边框的宽度、样式和颜色。 - `margin`、`margin-top...

    全屏css+DIV页面上中下三行布局,兼容各浏览器中间居中显示

    同时，为了兼容不支持Flexbox的旧版浏览器，可以使用传统的CSS方法，如使用position: absolute结合top和bottom属性，或者利用table-cell布局。 在HTML文件"全屏页面三行布局,兼容.htm"中，应该包含了实现这种布局的...

    垂直居中ie8+

    在IE8+支持CSS的多种方法，使得开发者能够灵活地处理不同场景下的垂直居中问题。下面我们将详细探讨几种主要的垂直居中技术及其应用。 1. **表格布局（Table-Cell Display）** 使用CSS的`display`属性设置为`table...

    IE6下fixed实现新浪微博头部定位

    总之，在IE6下实现类似新浪微博头部的固定定位是一项挑战，需要结合`expression`、`iframe`、`hasLayout`等技术，并注意性能和兼容性的优化。通过不断实践和调试，我们可以使老旧的浏览器也能呈现出接近现代浏览器的...

    jQuery六边形蜂巢布局关键词标签代码

    我们需要定义一个`.hexagon`类，然后使用`:before`和`:after`伪元素来创建六边形的上半部分和下半部分。关键CSS样式可能如下： ```css .hexagon { position: relative; width: 100px; /* 可根据需求调整 */ ...

    DIV+CSS IE圆角

    然而，早期版本的Internet Explorer（尤其是IE6、IE7和IE8）并不支持CSS3的一些高级特性，比如圆角。这就意味着在这些浏览器中，我们无法直接使用CSS来创建圆角效果。"DIV+CSS IE圆角"这个主题就是针对这个问题，...

    CSS标准网页布局开发指南.rar

    6. **响应式设计**：利用媒体查询(`media queries`)来实现不同设备或屏幕尺寸下的布局适应，确保网页在手机、平板和桌面等不同设备上都有良好的用户体验。 7. **CSS预处理器**：如Sass、Less和Stylus等工具，可以...

    国外一些源码,关于HTML,中的DIV圆角封装.

    这里的`top-left`、`top-right`、`bottom-right`和`bottom-left`分别代表了四个角落的边框半径，可以使用像素、百分比等单位。如果只设置一个值，那么所有角落的半径都一样；设置两个值，则第一个是水平半径，第二个...

    鼠标放上上下移动块（兼容IE8以上）

    虽然IE8不完全支持CSS3和现代JavaScript特性，但可以通过jQuery或者其他兼容库来弥补这一缺陷。jQuery提供了一套丰富的API，使得跨浏览器的JavaScript编程变得更加简单。 下面是一个基本的实现步骤： 1. **HTML...

    页面头部和底部固定

    在网页设计中，"页面头部和底部固定"是一种常见的布局方式，它确保无论用户滚动页面多远，头部和底部导航始终可见，提供一致的...记得在实际开发中测试不同设备和浏览器的兼容性，以确保布局在各种环境下都能正常工作。

    很简单的园角实现方法不过很管用

    4. 四个值：分别应用于上左、上右、下右和下左角落，顺序为`top-left, top-right, bottom-right, bottom-left`。 例如，如果你想要一个元素的所有角落都有10像素的圆角，你可以这样写： ```css .box { border-...

    div+css布局中常用方法汇总.docx

    7. **a:hover与th:hover在IE6下的兼容**：`a:hover`在IE6及以下版本中必须包含链接内容才生效；对于表格单元格`th:hover`，需配合JavaScript实现IE6识别。 8. **禁止链接获取焦点**：`onfocus='this.blur()'`可以...

Magicbox
Global site tag (gtag.js) - Google Analytics