inline-block在ie6中的经典bug
众所周知,给元素设置 inline-block ,可以让ie下的元素出发layout:1。
但是,当给元素设置 inline-block 后,在另外一个class 样式(非设置inline-block的class样式)重置为inline或者block。对于ie6下,该元素还会保留触发 layout:1;的效果。
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
.box a{display:inline-block;width:30%;background:#ccc;text-align:center;}
.box .fl{float:left;background:red;}
.box .fr{float:right;background:red;}
.box .center{display:block;}
</style>
<div class="box">
<a href="#" class="fl">left</a>
<a href="#" class="fr">right</a>
<a href="#" class="center">center</a>
</div>
</body>
</html>
在ie6下面会发现中间的模块会和左右模块之间有间距,可以看到白色背景。
这个bug就是inline-block样式引起的,虽然后来在 .box .center 样式中重置为block,但是该模块还是保留了layout:1;的属性。
解决办法:
<style>
.box a{width:30%;background:#ccc;text-align:center;}
.box .fl{float:left;display:inline-block;background:red;}
.box .fr{float:right;display:inline-block;background:red;}
.box .center{display:block;}
</style>
inline-block在ie6中的经典bug的更多相关文章
- IE6中的常见BUG与相应的解决办法
开发前端的同学一定都知道,IE6是兼容BUG最多的浏览器,它不支持PNG alpha通道暂且不论.其文档的解析理解规范也引起了诸多恼人的BUG,有时甚至让人感到绝望.本文主要讲解一些比较容易遇到的IE ...
- IE6中CSS常见BUG全集及解决方案——摘自网友
IE6中CSS常见BUG全集及解决方案 IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, ...
- jquery博客收集的IE6中CSS常见BUG全集及解决方案
今天的样式调的纠结,一会这边一会那么把jquery博客折腾的头大,浏览器兼容性.晚上闲着收集一些常见IE6中的BUG 3像素问题及解决办法 当使用float浮动容器后,在IE6下会产生3px的空隙,有 ...
- CSS中常见的BUG调试
1.布局--layout 布局是windows提出的概念,用于控制元素的尺寸和定位. 拥有布局的元素负责自身及其子元素的尺寸及定位,而没有布局的元素仅仅能依靠近期的祖先元素进行控制. 通常在IE6中出 ...
- 完美解决浮动IE6 7中的兼容性BUG问题
想要创建出漂亮的网页设计,除了要认真学习每一个html和CSS代码之外,不可能不去了解一下臭名昭著的IE6和更早的那些IE浏览器的坏脾气,因为你本来写出的规规矩矩的代码,漂亮的设计就此就要完成了,却发 ...
- IE6中浮动双边距bug
想要创建出漂亮的网页设计, 除了要认真学习每一个html和CSS代码之外,不可能不去了解一下臭名昭著的IE6和更早的那些IE浏览器的坏脾气,因为你本来写出的规规矩矩的代码, 漂亮的设计就此就要完成了, ...
- 那些盒模型在IE6中的BUG们,工程狮的你可曾遇到过?
HTML5学堂 那些盒模型在IE6中的BUG们,工程狮的你可曾遇到过? IE6已经渐渐的开始退出浏览器的历史舞台.虽然当年IE6作为微软的一款利器击败网景,但之后也因为版本的持续不更新而被火狐和谷歌三 ...
- 【IE6的疯狂之一】IE6中奇数宽高的BUG
IE6真是太疯狂了.今天由于项目需要做了这么一个布局:一个外部的相对定位div,内部一个绝对定位的div(right:0), 如图: 可是在IE6下查看,却变成了right:1px的效果了: IE6还 ...
- display:inline-block 在IE6中实现{转}
IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的displ ...
随机推荐
- Aspose 导出excel小demo
//转为pdf private void CelltoPDF(string cellPath, string pdfPath) { Workbo ...
- error: format not a string literal and no format arguments [-Werror=format-security]
You can put this in your Application.mk to disable treating those warnings as errors: APP_CFLAGS += ...
- 特征值分解,奇异值分解(SVD)
特征值分解和奇异值分解在机器学习领域都是属于满地可见的方法.两者有着很紧密的关系,我在接下来会谈到,特征值分解和奇异值分解的目的都是一样,就是提取出一个矩阵最重要的特征. 1. 特征值: 如果说一个向 ...
- IOS开发实现录音功能
导入框架: ? 1 #import <AVFoundation/AVFoundation.h> 声明全局变量: ? 1 2 3 4 5 @interface ViewController ...
- 如何利用OpenCV自带的级联分类器训练程序训练分类器
介绍 使用级联分类器工作包括两个阶段:训练和检测. 检测部分在OpenCVobjdetect 模块的文档中有介绍,在那个文档中给出了一些级联分类器的基本介绍.当前的指南描述了如何训练分类器:准备训练数 ...
- JAVA SSH 框架介绍
SSH 为 struts+spring+hibernate 的一个集成框架,是目前较流行的一种JAVA Web应用程序开源框架. Struts Struts是一个基于Sun J2EE平台的MVC框架, ...
- .net 科学类型相关问题
Q:如果我要把使用科学记数法表示的string转换为int又该如何呢? A:你可以通过把NumberStyles.AllowDecimalPoint | NumberStyles.AllowExpon ...
- js 正则 数值验证
function checkTextDataForNORMAL(strValue) { // 特殊字符验证格式 var regTextChar = /([\*"\'<>\/])+ ...
- 编写一个函数,接受三个string参数,s,oldVal和newVal。使用迭代器及insert和erase函数将s中所有oldVal替换为newVal。测试你的程序,用他替换通用的简写形式,如,将“tho”,将“”“”
// test14.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> #include< ...
- 使用node的http模块实现爬虫功能,并把爬到的数据存入mongondb
刚开始使用http中间件做爬虫其实蛮多坑的,最主要的坑就是编码问题,有很多中文网站的采用的gb2313的编码方式,这个在爬到的报文解析就很蛋碎, 因为http中间件对utf-8支持的比较好,所以针对这 ...