标签最低高度设置min-height不兼容
问题症状:因为min-height本身就是一个不兼容的CSS属性,所以设置min-height时不能很好的被各个浏览器兼容
碰到几率:5%
解决方案:如果我们要设置一个标签的最小高度200px,
需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}
备注:在B/S系统前端开时,有很多情况下我们又这种需求。当内容小于一个值(如300px)时。容器的高度为300px;
当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。
也可如下解决:
◆IE6认识的hacker 是下划线_ 和星号 *
◆IE7 遨游认识的hacker是星号 *
比如这样一个CSS设置:
height:300px;*height:200px;_height:100px;
IE6浏览器在读到height:300px的时候会认为高时300px;继续往下读,他也认识*heihgt
, 所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置,认为高度是200px。
继续往下读,IE6还认识_height,所以他又会覆盖掉200px高的设置,把高度设置为100px;
IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了,
因为它们不认识_height。所以它们会把高度解析为200px,剩下的浏览器只认识第一个height:300px;
所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个,所以书写的次序是很重要的。
元素居中问题
div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto;
IE浮动 float margin产生的双倍距离
#box {
float:left;
width:100px;
margin:0 0 0 100px;
display:inline;
}
padding问题
FF设置 padding 后,div会增加 height 和 width,
但IE不会 (* 标准的 XHTML1.0 定义 dtd 好像一致了)高度控制恰当,
或尝试使用 height:100
一般FF和IE的 padding 不会有太大区别,
div 的实际宽 = width + padding ,
所以div写全 width 和 padding,width 用实际想要的宽减去 padding 定义。
列表类
1. ul标签在FF中默认是有 padding值的,而在IE中只有margin有值
先定义 ul {margin:0;padding:0;}
2. ul和ol列表缩进问题消除ul、ol等列表的缩进时,样式应写成: {list-style:none;margin:0px;padding:0px;}
行内元素和块状元素的区别 (display:block,inline)
块状元素独占一行,会换行。默认情况下,宽度自动填满父元素宽度,如果父元素为100px,
子元素不写宽度默认为100px;
行内元素宽高不能由css决定,而是由内容决定的
行内元素的margin和padding的垂直方向上不产生边距效果
可以使用display:block;或display:inline;实现块级元素和行内元素的相互转换
常用的块状元素有:
<div>,<p>,<h1>~<h6>,<ol>,<ul>,<dl>,<table>,<form>,<address>,<blockquote>
常用的行内元素有:
<a>,<span>,<br>,<i>,<em>,<strong>,<label>,<img>,<input>,<q>,<var>,<cite>,<code>
跨浏览器的CSS透明度
.transparent {
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
}
文字阴影(CSS3)
.text { text-shadow: 1px 1px 1px #666;
filter: Shadow(Color=#666666, Direction=135, Strength=5); }
Box阴影(CSS3)
.box { box-shadow: 5px 5px 5px #666;
-moz-box-shadow: 5px 5px 5px #666;
-webkit-box-shadow: 5px 5px 5px #666; }
iframe元素內嵌頁面如何去掉继承的html及body背景色/背景图片
iframe元素的功能是在一个文档里内嵌一个文档,创建一个浮动的帧。
内嵌文档时一个完整的页面,有HTML,BODY等属性。这样遇到了一个问题,
如果样式表中对BODY定义过背景色/背景图片,那么内嵌文档将全部继承过来。
所以如何去掉背景色和背景图片:
【1】去掉背景色:filter:Chroma(Color=white);
举例:
<iframe width="100%" height="400" marginwidth="0"
marginheight="0" scrolling="no" frameborder="0"
leftmargin="0" topmargin="0" style="filter:Chroma(Color=white);" ></iframe>
【2】去掉背景图片:
举例:
<iframe width="100%" height="400" marginwidth="0"
marginheight="0" scrolling="no" frameborder="0"
style="filter:Chroma(Color=white);" allowTransparency="true" ></iframe>
注意:内嵌页面同时也要增加BODY属性:
<body bgcolor="transparent" style='background:transparent'>
为什么web标准中无法设置IE浏览器滚动条颜色了?
原来样式设置:
解决办法是将body换成html。
如何定义1px左右高度的容器
IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,
例如:overflow:hidden | zoom:0.08 | line-height:1px
怎样使一个div层居中于浏览器中
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
div {
position:absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width:200px;
height:200px;
border:1px solid red;
}
文字与图片垂直居中对齐方法?
为图片与文字的共同父元素所有的后代元素定义*{vertical-align:middle};例如:
<p>我要的坚强<img src="i/image.gif" /></p>
只需定义p*{vertical-align:middle}即可使文字与图片同行垂直居中.