`
paulfzm
  • 浏览: 884348 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

ie8 出现的display:table宽度问题

    博客分类：
  • CSS
IECSSFirefox浏览器JavaScript 
阅读更多

现在我们在做网页的时刻总是要考虑一些浏览器之间的兼容问题。近期在做一个短信平台的项目。在项目的开发过程中让我遇到了一件头痛的事情就是IE7与IE8不兼容。后面想了许多办法得以解决。现共享如下：

如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：

CODE:

<meta http-equiv="x-ua-compatible" content="ie=7" />

 

解决firefox ie6 ie7的css样式兼容问题

做主题最麻烦的就是CSS样式兼容问题，由于各浏览器对ccs的不同解释，造成本来IE7可正常显示，但到了Firefox 、ie6等其它浏览器上，却出现错位、下沉等问题，只得在Firefox 、ie6 、ie7之间不停的切换调试，汗…最近又有两款浏览器加入googleChrome和IE8,某个浏览器一统天下看来是没希望了，只能尽量克服兼容问题。找到一篇解决兼容问题的文章，还是很有效的。

1 针对firefox ie6 ie7的CSS样式

现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了现在写一个CSS可以这样：

#1 { color: #333; } /* Moz */

* html #1 { color: #666; } /* IE6 */

*+html #1 { color: #999; } /* IE7 */

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

2 css布局中的居中问题

主要的样式定义如下：

body {TEXT-ALIGN: center;}

#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

说明：

首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。

但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

3 盒模型不同解释.

#box{

width:600px;

//for ie6.0- w\idth:500px;

//for ff+ie6.0

}

#box{

width:600px!important

//for ff

width:600px;

//for ff+ie6.0

width /**/:500px;

//for ie6.0-

}

4 浮动ie产生的双倍距离

#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}

这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);

#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;

5 IE与宽度和高度的问题

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

6 页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类：

然后CSS这样设计：

#container{

min-width: 600px;

width:e­xpression(document.body.clientWidth < 600? “600px”: “auto” );

}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7 清除浮动

.hackbox{

display:table;

//将对象作为块元素级的表格显示

}

或者

.hackbox{

clear:both;

}

或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦的

……#box:after{

content: “.”;

display: block;

height: 0;

clear: both;

visibility: hidden;

}

8 DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{

float:left;

width:800px;}

#left{

float:left;

width:50%;}

#right{

width:50%;

}

*html #left{

margin-right:-3px;

//这句是关键

}

HTML代码

<DIV id=box>

<DIV id=left></DIV>

<DIV id=right></DIV>

</DIV>

9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}div[id]{}

p[id]{}div[id]{}

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用

属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

10 IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。

有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。

解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。

11 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用

margin 或paddign 时。例：

<div id=”box”>

<p>p对象中的内容</p>

</div>

CSS：

#box {background-color:#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

 

注：IE都能识别*;标准浏览器(如FF)不能识别*；

IE6能识别*，但不能识别 !important,

IE7能识别*，也能识别!important;

FF不能识别*，但能识别!important;

本篇文章来源于 www.17aspx.com 原文链接：http://www.17aspx.com/web/html/2009/1122/348.html

分享到：
| ff浏览器父容器自适应内部带有浮动层的高度 ...
评论
发表评论

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

相关推荐

    关于CSS中的display:table-cell使用技巧的几种应用

    然而，需要注意的是，`display: table-cell` 在 Internet Explorer 6 和 7 中不受支持，这限制了它在需要兼容旧版IE浏览器的项目中的应用。 1. **display: table-cell属性简述** - `display: table-cell` 让元素...

    实现div垂直居中的display:table-cell方法示例介绍

    在示例代码中，我们看到使用了一个外部容器div#wrap，设置其display属性为table，并为该容器定义宽度和高度。然后，内部容器div#subwrap的display属性设置为table-cell，并配合vertical-align:middle属性来实现垂直...

    CSS属性display:inline-block用法深入理解

    `display:inline-block`是其中一种特殊的值，它结合了`inline`和`block`两种显示特性的优点，使得元素既能像内联元素一样并排显示，又能像块级元素一样控制内容的宽度和高度。下面我们将深入探讨`display:inline-...

    表格设置table-layout:fixed后对单元格宽度设置无效

    在实施解决方案时，还需注意一些细节问题，例如确保CSS中table-layout属性设置为fixed，并且表格宽度也被适当地指定，以便于固定布局的生效。同时，当使用col标签指定宽度时，也需要在相应的col标签中明确指定width...

    CSS之display引用运用

    例如，在IE6和IE7中，可能会出现布局错乱的问题。 为了解决这些问题，可以采用以下几种方案： - **使用Polyfill**：对于不支持`display:inline-block`的浏览器，可以使用Polyfill来提供兼容性支持。 - **使用`...

    CSS：Table-cell属性的妙用让div也能享受table定位的好处

    2. **兼容性**：这种方法在大多数现代浏览器中都有良好的支持，包括IE8及更高版本。 3. **简洁性**：相比于传统的表格布局，使用CSS可以减少HTML标记，使代码更简洁。 然而，值得注意的是，`display: table`系列的...

    table标头固定 列固定

    为了保证兼容性，我们需要考虑老旧的浏览器，如IE8及以下版本。这些浏览器不支持CSS的`position: fixed`，因此可以使用JavaScript来实现类似的效果。例如，可以监听滚动事件，计算thead的位置并将其动态定位到视口...

    div模拟table兼容ie620140424

    标题"div模拟table兼容ie620140424"指出，这是一个关于在2014年时如何使用div元素来模拟table布局，并确保在IE6中达到兼容性的技术问题。描述中提到，目标是实现table的自适应功能，以及表头的列宽与表体列宽保持...

    table内容出现滚动条和表头对齐问题

    为了解决"table内容出现滚动条和表头对齐问题"，我们需要深入理解表格布局、CSS样式控制以及可能涉及到的JavaScript或jQuery解决方案。 首先，让我们了解一下HTML表格的基本结构。一个HTML表格由`&lt;table&gt;`元素开始...

    DIV CSS 网页兼容全搞定 IE6 IE7 IE8 IE9 火狐 谷歌

    然而，由于不同浏览器之间的解析差异，尤其是在IE6、IE7、IE8等旧版本的Internet Explorer中，CSS兼容性问题时常出现。本文将深入探讨如何解决这些问题，确保网页在各种浏览器中都能正常显示。 首先，编写XHTML格式...

    IE6_IE7_IE8 CSS 兼容速查表

    3. **透明度支持**：IE6不支持CSS的`opacity`属性，可以使用滤镜（filter）实现透明效果，例如`filter:alpha(opacity=50)`，但请注意这会导致其他非IE浏览器出现问题。 4. **PNG透明问题**：IE6不支持PNG24的透明...

    IE兼容性总结

    `时，在IE8中元素出现了浮动问题。 - **解决方法**：可以通过减小宽度值来避免这个问题，例如使用`width: 98%;`并适当减小实际宽度值，以防止在IE8中出现异常浮动。 3. **元素ID #linklist中的空白问题** - **...

    IE和谷歌浏览器下div宽度不一致的问题解决.txt

    在实际项目中，开发者可能会发现某些布局在Chrome等现代浏览器上显示正常，但在IE浏览器（特别是IE8及以下版本）中会出现宽度不一致的现象。这种现象通常是由于不同浏览器对CSS规则的解释存在细微差别所导致的。 ##...

    css解决IE6,IE7,firefox兼容性问题.

    - 空格和回车会导致元素间出现间隙，且在 IE 和 Firefox 中的宽度不同。解决方案是： ```css .elements { white-space: nowrap; } /* 防止换行 */ ``` 4. **对不规范代码的兼容性差异** - IE 对未闭合的标签更...

    最全的CSS浏览器兼容问题整理(IE6、IE7)

    当左侧元素浮动，右侧元素使用外边距对齐时，IE会出现3像素的文本间距。解决方法是在IE特定的CSS中添加负的`margin-right`，如： ```css #left { float: left; width: 50%; *margin-right: -3px; /* 这句是...

    css将两个元素水平对齐的方法(兼容IE8)

    在兼容IE8的情况下，我们可以采用多种方法来实现这一目标。本文将详细讲解三种常见的方法：`float`、`display: inline-block` 和 `display: table-cell`。 1. **使用 `float` 属性** `float` 是一种早期的布局技术...

    解决IE6、IE7、IE8样式不兼容问题

    ### 解决IE6、IE7、IE8样式不兼容问题：深入探讨与实践 #### 一、引言 在Web开发领域，确保网页在不同浏览器中的兼容性一直是一大挑战，尤其是在面对老旧的IE浏览器（IE6、IE7、IE8）时。这些浏览器由于其过时的...

    css 兼容性 ie6， ie7， ie8

    3. **浮动元素清除**：IE6-8对`clearfix`类的支持不如现代浏览器，需要使用特定的clearfix hack，或者使用`display: table`和`display: table-cell`等方法来实现无浮动的布局。 4. **伪类选择器**：IE6不支持`:...

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