1.两个div左边的固定宽度右边的自动填充的css

<div id="main" style="width:98%;">
<div id="left" style="float:left;width:200px;border:1px solid red;height:100px;">
</div>
<div id="right" style="height:100px;border:1px solid blue;width:auto;margin-left:200px;">
</div>
</div>

2.RM8005: IE6 IE7 IE8(Q) 中行内元素后相邻的浮动元素在某些情况下会折行放置在之前行内元素所在行框的底部

在 IE6 IE7 IE8(Q) 中,浮动的 SPAN 折行浮动在新的一行上,同时位置也脱离了其父容器;在其他浏览器中,则遵照 CSS 2.1 规范对浮动的定义,将浮动元素显示在浮动框另一边的第一个可用行上。

在 IE6 IE7 下,测试代码没有达到我们预计的效果,右浮动的 SPAN 折行浮动在新的一行上,同时位置也脱离了其父容器。 现在看看 Text1、 Text2……Text5 所在的 SPAN 元素作为浮动框之前当前行的内容,应该显示在浮动框另一边的第一个可用行上。 右浮动的 SPAN 紧贴在其父容器的右边界,其左侧的空白区域只要有足够的空间容纳这 5 个非浮动的 SPAN 元素,它们就应该保持与右浮动的 SPAN 元素位于同一行上。 这里 IE6 IE7 以及所有版本 IE 的混杂模式的处理均是错误的。

此问题的触发条件:

同一个父容器内有多个行内元素;某些为非浮动元素,某些为浮动元素(可以是左浮动或右浮动);浮动的子元素不都是位于非浮动的子元素之前。

解决方案

依具体情况可以使用三种方法:使用绝对定位模拟右浮动、使用 IE hack 专门在IE6 IE7 中设置负的上外边距、将右浮动的 SPAN 元素调整到所有非浮动 SPAN 元素之前。

使用绝对定位(position:absolute)模拟右浮动(float:right)。 为了避免 IE6 IE7 的这个 BUG,可以不使用右浮动,而是用绝对定位及右偏移(right:XXXpx),如为右浮动元素设置 'position:absolute' 及 'right:3px' 替代 'float:right',但这样做的代价是必须为父容器 DIV 元素设置 'postion:relative',这么做仍然会破坏原文档结构。所以我们并不推荐此方法。使用 IE hack 专门在IE6 IE7 中设置负的上外边距(margin-top:-XXXpx)。 既然此 Bug 为IE6 IE7 专有,则只需要在 IE6 IE7 下为右浮动元素设置一个负的上外边距即可,其他浏览器保持原样式。所以可以考虑使用只有 IE6 IE7支持的 hack 方式:在 CSS 特性前加星号 '*'。

如 *margin:-23px 5px 0 0,这样既可消除 IE6 IE7 中的 Bug,但是这么做是利用了浏览器的 Bug,并没有消除 Bug。在能有个更好的解决方法的时候,不推荐使用 CSS hack 来解决问题。调整SPAN元素的位置。 通过上面总结的 Bug 触发条件,我们可以考虑直接调整父容器中 SPAN 子元素的位置来回避 IE6 IE7 中此 Bug,即将右浮动的 SPAN 元素调整到所有非浮动 SPAN 元素之前。

css 一些事的更多相关文章

  1. CSS那些事!这个篇幅是我特意开的,不是因为帮助小菜之类的,而是在多人的团队配合中各种命名冲突的规范让人蛋疼

    CSS那些事!这个篇幅是我特意开的,不是因为帮助小菜之类的,而是在多人的团队配合中各种命名冲突的规范让人蛋疼. css这个东西只要不是新的离谱都会写,但是每个人的命名风格,方法,都不同 有人喜欢驼峰, ...

  2. 学习CSS一些事(下)

    2.浮动(float) 浮动(float)特点:1.元素会左移.右移,直到触碰到容器为止.    2.设置浮动元素,仍旧处于标准文档流. 3.当元素没有设置宽度值,而设置了浮动属性,元素的宽度随着内容 ...

  3. 学习CSS一些事(上)

    p.s:这是我在学习中总结出来知识,如有不对,请多包涵.谢谢. CSS样式:行内样式,内部样式,外部样式,他们的优先级是:行内,内部,外部,遵循就近原则. 一.HTML+CSS布局分为三大类,一是流式 ...

  4. css那些事(一)

    一.内边框padding和外边框margin属性缩写 内外边框有四个属性:padding-top,padding-right,padding-bottom,padding-left;margin-to ...

  5. js的动态加载、缓存、更新以及复用(三)

    总体思路 1.  建立一个js服务,该服务实现通用js文件的加载.依赖.缓存.更新以及复用. 2.  各个项目如果使用通用js,可(bi)以(xu)使用js服务实现加载. 3.  Js服务只提供通用的 ...

  6. 【JQuery NoviceToNinja系列】01 开篇 Html页面设计和布局

    01 开篇 Html页面设计和布局 index.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml ...

  7. 翻屏类 h5 适配方案:解决宽高自适应难题

    表格 图片等 宽度自适应  :width:100%;  box-sizing: border-box; 基于淘宝适配方案flexible + 翻屏h5 适配方案adaptive flexible解读及 ...

  8. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  9. css水平居中那点事

    昨晚深夜写了css垂直居中那点事,今晚该写他的兄弟篇:css水平居中那点事了..…^^ 其实本来这两个可以连在一起写,可是为了不要搞混,为了让思路更清晰,最后决定还是分开来些比较好...这样以后也有利 ...

随机推荐

  1. hdu1114Piggy-Bank(DP完全背包)

    题意:在ACM可以做任何事情,必须准备和预算获得必要的财政支持.这次行动的主要收入来自不可逆绑定金钱(IBM).背后的想法很简单.每当一些ACM成员有任何小的钱,他把所有的硬币和成小猪银行抛出.你知道 ...

  2. codefirst初尝试

    Code First 约定 借助 CodeFirst,可通过使用 C# 或Visual Basic .NET 类来描述模型.模型的基本形状可通过约定来检测.约定是规则集,用于在使用 Code Firs ...

  3. asp.net软件测试学习

    ormaping类是,将数据操作封装起来的一种数据操作方法,在测试的时候,如果说,insert之后对obj对象赋值赋值,每个属性应该对应自己的objDataRow["REGISTERID&q ...

  4. js获取当前年月日

    function GetDate(){ var now = new Date(); var year = now.getFullYear();        //年var month = now.ge ...

  5. (转)ios限制控制器旋转

    iOS屏幕旋转控制 iOS屏幕旋转控制(iOS6之后)       iOS6之前,子控制器只要覆盖父类的shouldAutorotateToInterfaceOrientation:方法就能单独控制某 ...

  6. WPF-MVC开发模式简要介绍

    1, 建立WPF程序,并在程序中添加三个文件View,ViewMoudle,Moudle, 2,Moudle文件加中添加类,此文件夹中存放的类基本为数据类,主要是字段和属性 3 ViewMoudle文 ...

  7. BZOJ 2434: [Noi2011]阿狸的打字机( AC自动机 + DFS序 + 树状数组 )

    一个串a在b中出现, 那么a是b的某些前缀的后缀, 所以搞出AC自动机, 按fail反向建树, 然后查询(x, y)就是y的子树中有多少是x的前缀. 离线, 对AC自动机DFS一遍, 用dfs序+树状 ...

  8. Svn服务启动的两种方式

    一.svn服务器启动 › cmd命令行启动:vsvnserve -d –r 文档仓库路径 -d 后台执行 › -r 版本库的根目录 二.›Windows服务自动启动     利用xp.2000 以上的 ...

  9. VC++学习之GDI概述

    VC++学习之GDI概述 图形设备接口(GDI)是一个可执行程序,它接受Windows应用程序的绘图请求(表现为GDI函数调用),并将它们传给相应的设备驱动程序,完成特定于硬件的输出,象打印机输出和屏 ...

  10. 《JavaScript+DOM编程艺术》的摘要(一)---基本知识点

    保持良好的编程习惯:在同一脚本中,保持引号的一致性,都用单引 var mood = "don\"t worry";alert(mood); 数组:var arr=Arra ...