CSS浮动引起文本重影的怪异问题

2016-02-17 04:29 8 1 收藏

今天图老师小编给大家精心推荐个CSS浮动引起文本重影的怪异问题教程,一起来看看过程究竟如何进行吧!喜欢还请点个赞哦~

【 tulaoshi.com - 平面设计 】

事物绝非十全十美总有强差人意的一面,之前针对浮动分析了其引起文本重影的怪异问题,而作为浮动布局的最佳搭档定位布局也存在一定的缺陷。

围绕着定位列出的种种问题,对某些情况只是作出了分析而暂时没有找到有解决方案,但既然知道问题所在,我们可以尽可能的采取其它措施避免这现象。

position:relative;属性值导致overflow:hidden;失效。

问题:在IE6/7中子级设置position:relative;属性值后,导致父级的overflow:hidden;失效。Demo1

CSS浮动引起文本重影的怪异问题,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

分析:与定位的层级关系有关,IE6/7解析为内容已经跳出文档流,以致父级误以为没有包含内容。

解决方案:

对于IE6可以为父级添加定位属性纠正问题,但IE7依然无效。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

overflow充当了position:relative的角色

问题:在IE6或IE quirks模式中设定overflow:auto/hidden/scroll属性值后,元素显示效果相当于position:relative的相对定位效果。

Demo2

CSS浮动引起文本重影的怪异问题,PS教程,图老师教程网

分析:在怪异模式与标准模式下的页面对CSS的解析会有一定的差异甚至是扭曲了其属性的作用,对这现象暂时还没有冲破的能力,也只能记录与回避了。

没有实渲染导致绝对定位的错误

问题:在IE6中,子级元素绝对定位于父级元素时,当动态改变父级宽高时,子级位置没有发生变化。Demo3

CSS浮动引起文本重影的怪异问题,PS教程,图老师教程网

分析:估计是动态改变父级宽度时,IE6并没有实时对浏览器渲染。暂时没有CSS能解决这问题,但可尝试使用JS对改变改模块高度进行刷新解决这问题。

IE6中position:relative;属性值无效

问题:在IE6及以下版本,父级元素已设置position:relative;属性值,但子级绝对定位元素没有生效。Demo4

CSS浮动引起文本重影的怪异问题,PS教程,图老师教程网

分析:原因在于父级元素没有触发haslayout(相关资料请搜索On having layout),IE7及以上的高级浏览器则不存在这问题。

解决方案:

在父级元素中添加让其触发haslayout的CSS属性值。

奇数引起定位的1pxBUG

问题:在IE6及以下版本,父级元素宽度高度为奇数时,子级元素绝对定位于(right:0;bottom:0;),会出现往内偏移1px的错误。Demo5

CSS浮动引起文本重影的怪异问题,PS教程,图老师教程网

分析:其真正原因还得问IE6的开发者了。但从例子中可以观察到左上角的子级元素显示正常,其原因为盒子拉伸扩展为上至下左至右,估计于此以至靠左边或顶部的位置不会发生移动的变化。

讨论

来源:http://www.tulaoshi.com/n/20160217/1578504.html

延伸阅读
标签: Web开发
一个多月前总结了《清理浮动的全家》,当时看了之后没什么新鲜的东西也就忽略了,今天偶然又翻到那篇文章,想到了另外一个的方法(N久前在书店翻到的),在网上没看到有人提起过,写出来大家一起讨论下。 HTML: CSS: Firefox下效果:   可见,ul的黄色背景并没有显示出来。 重点来了: 在CSS理加上如下代码 ...
标签: Web开发
在上一个文章里写了关于左(右)侧定宽右(左)侧自动缩放的两列浮动,这个文章就要说一下三列浮动的问题了。在之前说过,两列浮动是其他多列浮动的基础,明白了两列浮动的原理后,三列或三列以上的多列浮动也变得简单。 左侧中间定宽,右侧自适应: 因边左侧跟中间都是定宽的,只有右侧是自适应宽度的,所以这个三列浮动是和两...
标签: Web开发
direction版本:CSS2 兼容性:IE5+ 继承性:有 语法: direction : ltr | rtl | inherit 取值: ltr : 默认值。文本从左到右流入 rtl : 文本从右到左流入 inherit : 文本流入方向由继承获得 说明: 用于设置文本流入的方向。请参阅对象的 dir 属性。 此属性不会影响拉丁文的字母数字字符,它们总是以 ltr 值被呈递。但是...
标签: Web开发
CSS浮动一直是个比较让人郁闷的问题,很多的布局问题都出在浮动上,特别是当浮动的列数很多时,但其实只要理解了两列结构的浮动,面对多列数的浮动也不会再心慌,因为两列结构的左右浮动是最基本的浮动,也是更多浮动的基础,三列、四列等的浮动都是出于此的。 来看一下几种常见的CSS两列浮动,CSS代码见以下各分类,HTML结构代码如下...
标签: Web开发
清理浮动有很多种方式,像使用 br 标签自带的 clear 属,使用元素的 overflow,使用空标签来设置 clear:both 等等。但考虑到兼容问题和语义化的问题,一般我们都会使用如下代码来清理浮动。 /* 清理浮动 */ .clearfix:after {  visibility:hidden;  display:block;  font-size:0;  content:" ";  clear:bo...

经验教程

161

收藏

43
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部