16、万能float闭合
万能float闭合是用来解决一个容器中存在float属性的容器时,外部容器不会随内部float容器而自适应高度,使得设置在外部容器中的style不能覆盖容器内的含floa的容器,解决方法是在外部容器中添加如下代码:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
以下面的代码为例,看一下,加入clearfix之前和加入之后的效果
<div style="background-color: #99CCFF" class="clearfix">
<!-- float container -->
<div style ="float:left; width:30%;">
<p>Some content </p>
</div >
<p> Text not inside the float </p>
</div
17.margin和padding默认值问题
不同的浏览器在解析网页的时候会有margin和padding的默认值,因此,为了不必要的麻烦,在网页中设置margin和padding的初始值是很重要的。例如UL的padding与margin ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题。
18、游标手指cursor cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以
19、DIV浮动IE文本产生3象素的bug 左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.
#box{ float:left; width:800px;} #left{ float:left; width:50%;}
#right{ width:50%;} *html #left{ margin-right:-3px; //这句是关键}
<div id="box"> <div id="left"></div> <div
id="right"></div> </div>
20、为什么无法定义1px左右高度的容器 IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px。
21、怎么样才能让层显示在FLASH之上呢 解决的办法是给FLASH设置透明 <param name="wmode" value="transparent" />
22、怎样使一个层垂直居中于浏览器中这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二 <style
type="text/css"> <!-- div { position:absolute; top:50%;
lef:50%; margin:-100px 0 0 -100px; width:200px;
height:200px; border:1px solid red; } --> </style>
23、为什么FF下文本无法撑开容器的高度标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就
是去掉height设置min- height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义: {
height:auto!important; height:200px; min-height:200px; }
- 大小: 1.5 KB
- 大小: 1.7 KB
分享到:
相关推荐
浏览器兼容常见问题css兼容 css兼容 浏览器兼容 IE6789兼容
CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页...
CSS 在不同浏览器中的兼容问题 CSS 在不同浏览器中的兼容问题是 web 开发中的一大挑战。不同的浏览器对 CSS 的解析和渲染方式存在差异,从而导致相同的 CSS 代码在不同浏览器中显示效果不同。本文将总结常见的 CSS ...
在网页设计领域,CSS(Cascading ...总的来说,处理CSS兼容性问题需要对各种浏览器的特性有深入理解,并掌握一定的技巧和工具。通过学习和实践,我们可以更好地应对这些挑战,创建出在多种浏览器下都能完美展现的网页。
《CSS-浏览器兼容实战》一书深入探讨了CSS在不同浏览器中的兼容性问题及其解决方案。CSS,即层叠样式表,是用于控制HTML或XML文档样式的计算机语言。在网页设计中,CSS起着至关重要的作用,尤其在实现响应式布局和...
"CSS浏览器兼容性速查"是开发者在工作中不可或缺的一个参考资料,它帮助我们了解各种CSS属性在不同浏览器上的表现,以便于优化代码,确保网站在主流浏览器上都能正常显示。 首先,我们要理解浏览器兼容性问题的来源...
CSS 多浏览器兼容性是Web开发中的重要环节,因为不同的浏览器对CSS的解析方式可能存在差异,这可能导致在不同浏览器中页面展示效果不一致。以下是一些关键知识点和解决方案: 1. **DOCTYPE影响CSS处理**: DOCTYPE...
### 如何让CSS在所有浏览器下兼容 在Web开发领域,确保CSS代码能够在不同浏览器上稳定运行是一项重要的技能。本文将详细介绍如何使CSS在各种浏览器(包括但不限于IE6、IE7、IE8以及现代浏览器如Firefox和Chrome)下...
以下是一些常见的CSS浏览器兼容性问题及其解决方案: 1. **垂直居中问题**: 在CSS中,要实现一个div的垂直居中,可以使用`vertical-align: middle;`和`line-height`属性。但这种方法要求内容不换行。例如: ```...
接下来,我们讨论解决CSS兼容问题的一些常见方法: 1. **使用浏览器前缀**:许多CSS3的新特性在早期的浏览器中需要特定的前缀才能生效,例如 `-webkit-`、`-moz-`、`-ms-` 和 `-o-`。为确保在这些浏览器中的兼容性...
css 兼容 css重设兼容浏览器 css重设兼容浏览器
本文旨在总结和分享一系列关于CSS兼容性的技巧,帮助开发者更好地解决在不同浏览器(如IE6-IE9、Firefox、Chrome等)下的样式差异问题。 #### 二、CSS兼容性基础知识 在深入探讨具体的兼容性技巧之前,我们首先...
css渐变代码,代码兼容各个浏览器,适用于ie7以上及各主流浏览器
CSS浏览器兼容性问题解决方案 CSS浏览器兼容性问题是Web开发中常见的问题。不同的浏览器对CSS的解析方式不同,这就导致了浏览器之间的兼容性问题。了解浏览器的兼容性问题是非常重要的,为此,我们总结了一些常见的...
本文将详细介绍如何编写针对不同浏览器的CSS兼容写法。 首先,我们可以使用特定的CSS选择器来让特定浏览器识别某些样式。例如,对于IE6,我们使用`*html .head{color:#000;}`,其中星号(*)前缀的选择器只有IE6会...
由于各个浏览器对CSS规范的实现不完全相同,存在一些兼容性问题,开发者可以通过特定的语法结构或者属性值来让特定的浏览器识别并应用这些样式。Safari,尤其是基于WebKit内核的Safari和Chrome浏览器,它们在处理...
CSS浏览器兼容问题,解决各个浏览器中css不兼容的问题。
在CSS(层叠样式表)领域,跨浏览器兼容性是一个重要的课题,因为它涉及到网页在不同浏览器上的一致性展示。每个浏览器对CSS的理解和实现可能存在差异,这可能导致样式在Firefox、Chrome、Safari、Edge以及Internet ...
"别具光芒——CSS属性、浏览器兼容与网页布局"这个主题涵盖了三个核心概念:CSS属性、浏览器兼容性和网页布局。 首先,我们来详细探讨CSS属性。CSS提供了无数的属性,如颜色、字体、大小、位置等,这些属性共同决定...