css 一些事
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 一些事的更多相关文章
- CSS那些事!这个篇幅是我特意开的,不是因为帮助小菜之类的,而是在多人的团队配合中各种命名冲突的规范让人蛋疼
CSS那些事!这个篇幅是我特意开的,不是因为帮助小菜之类的,而是在多人的团队配合中各种命名冲突的规范让人蛋疼. css这个东西只要不是新的离谱都会写,但是每个人的命名风格,方法,都不同 有人喜欢驼峰, ...
- 学习CSS一些事(下)
2.浮动(float) 浮动(float)特点:1.元素会左移.右移,直到触碰到容器为止. 2.设置浮动元素,仍旧处于标准文档流. 3.当元素没有设置宽度值,而设置了浮动属性,元素的宽度随着内容 ...
- 学习CSS一些事(上)
p.s:这是我在学习中总结出来知识,如有不对,请多包涵.谢谢. CSS样式:行内样式,内部样式,外部样式,他们的优先级是:行内,内部,外部,遵循就近原则. 一.HTML+CSS布局分为三大类,一是流式 ...
- css那些事(一)
一.内边框padding和外边框margin属性缩写 内外边框有四个属性:padding-top,padding-right,padding-bottom,padding-left;margin-to ...
- js的动态加载、缓存、更新以及复用(三)
总体思路 1. 建立一个js服务,该服务实现通用js文件的加载.依赖.缓存.更新以及复用. 2. 各个项目如果使用通用js,可(bi)以(xu)使用js服务实现加载. 3. Js服务只提供通用的 ...
- 【JQuery NoviceToNinja系列】01 开篇 Html页面设计和布局
01 开篇 Html页面设计和布局 index.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml ...
- 翻屏类 h5 适配方案:解决宽高自适应难题
表格 图片等 宽度自适应 :width:100%; box-sizing: border-box; 基于淘宝适配方案flexible + 翻屏h5 适配方案adaptive flexible解读及 ...
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- css水平居中那点事
昨晚深夜写了css垂直居中那点事,今晚该写他的兄弟篇:css水平居中那点事了..…^^ 其实本来这两个可以连在一起写,可是为了不要搞混,为了让思路更清晰,最后决定还是分开来些比较好...这样以后也有利 ...
随机推荐
- 大型票务系统中username和password的安全性问题
讨论请移步至:http://www.zhiliaotech.com/ideajam/idea/detail/307 相关文章: <今天你买到票了吗?--从铁道部12306.cn站点漫谈电子商务站 ...
- C#实现给手机发送短信
public static void SendSMS(string FaSongUser, string ToUserList, string ContentStr) { //针对 ...
- SQL学习之Insert的特殊用法(插入检索出的数据,表之间的数据复制)
1.插入检索出的数据 select * from dbo.Customers_1
- 用VIM删除空行
从网上找了一个 :g/^s*$/d 开始用的挺好,后来遇到一种空格开头的空行,就不好用了. MSDN上说正则匹配空行用/^\s*$/,就试着把上面的命令改为: :g/^\s*$/d 就可以了. 用的操 ...
- sql server 2000 对应 sql server 2005的row_number()、rank()、DENSE_RANK( )、ntile( )等用法
转自CSDN:http://blog.csdn.net/htl258/article/details/4006717 SQL server 2005新增的几个函数,分别是row_number( ).r ...
- 笔记-AndroidStudio开发环境的搭建
首先当然是下载AndroidStudio,目前最新的稳定版是1.1 然后下载studio版本的sdk,如果用原装sdk,需要更新 安装的过程中会选择sdk的路径,此时如果已经解压了原装sdk,会进 ...
- linux使用wget纯命令下载JDK的方法(凑字数)
linux使用wget纯命令下载JDK的方法 linux使用wget纯命令下载JDK的方法 Oracle官网上下载jdk,需要点击accept licence的才能下载,所以一般的直接使用wget下载 ...
- 四轴飞行器1.4 姿态解算和Matlab实时姿态显示
原创文章,欢迎转载,转载请注明出处 MPU6050数据读取出来后,经过一个星期的努力,姿态解算和在matlab上的实时显示姿态终于完成了. 1:完成matlab的串口,并且实时通过波形显示数据 2:添 ...
- Net Core- 配置组件
Net Core- 配置组件 我们之前写的配置都是放置在配置文件Web.config或者app.config中,.net core提供了全新的配置方式,可以直接写在内存中或者写在文件中. .Net C ...
- MySQLD 配置
http://blog.163.com/sir_876/blog/static/11705223201372710303382/ http://www.kankanews.com/ICkengine/ ...