css兼容问题整理

最新推荐文章于 2022-12-08 15:04:13 发布

大西瓜啃完了哟

最新推荐文章于 2022-12-08 15:04:13 发布

阅读量265

点赞数

标签最低高度设置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; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}

padding问题

FF设置 padding 后，div会增加 height 和 width，
但IE不会 （* 标准的 XHTML1.0 定义 dtd 好像一致了）高度控制恰当，
或尝试使用 height:100%;宽度减少使用 padding但根据实际经验，
一般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浏览器滚动条颜色了？

原来样式设置：
<!--<style type="text/css">-->
<!--body{scrollbar-face-color:#f6f6f6;
 scrollbar-highlight-color:#fff; 
scrollbar-3dlight-color:#eeeeee; 
scrollbar-arrow-color:#000; 
scrollbar-track-color:#fff;
 scrollbar-darkshadow-color:#fff; }-->
<!--</style>-->
解决办法是将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}即可使文字与图片同行垂直居中.

大西瓜啃完了哟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css兼容问题整理

标签最低高度设置min-height不兼容问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容碰到几率：5%解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:vis
复制链接

扫一扫