我们提供西藏网站维护服务,以实惠、方便、快捷著称!一次服务,终身朋友! ·付款帐号 ·联系我们
西藏网站维护
网站维护热线: 网站维护咨询热线 网站维护:
网站建设: 网站建设
首页
维护介绍
维护套餐
案例分享
维护申请
维护反馈
维护知识
行业动态
联系我们
建站服务请点这里>>
网站维护申请
当前位置:首页 > 维护知识

css代码兼容浏览器技巧总结

来源:维护啦 作者:www.weihula.com 人气: 2010-11-3
内容提示:

解决CSS的浏览器兼容性问题,多年切图工作的总结:)

/* 统一各个浏览器下 外边距margin、内填充padding的默认值 */
html,body,a,h1,h2,h3,h4,h5,h6,p,div,ul,li,ol,dl,dt,dd,img,form,input,textarea,select,fieldset { margin:0px; padding:0px }

/* 统一标题公共样式 text-shadow:gray 0px 0px 5px; 文字阴影 font-weight:800 平滑的加粗 */
h1,h2,h3,h4,h5,h6,b,strong { font-family:Arial,Verdana,sans-serif; font-weight:800 }

/* 网页公用的属性: 字体、文字颜色、背景色等 */
body,table,input,select,textarea { font-family:SimSun, "宋体", Arial; font-size:12px; }

body, table { background-color:white }
body { color:#636363; font-size:12px }

/* 控制英文字符连续自动换行 */
div,span,th,td,dt,dd,h1,h2,h3,h4,h5,h6,em,strong,i,a,b,a,p { word-break:break-all; word-wrap:break-word; }

ul,ol,dl { list-style-type:none }
select,input,select { vertical-align:middle }

img { border:0 none; text-align:absmiddle; background-color:transparent }

/* 表格居中显示 */
table { margin-left:auto; margin-right:auto; border-width:0 none }

/* 默认链接的样式设置 */
a { color:#000; text-decoration:none }
a:hover { text-decoration:underline }

/* 去a虚线框 cdl: clear dotted line */
.cdl, a:active { outline:none; blr:expression(this.onFocus=this.blur()) }
:focus { outline:none } /* for Firefox */

/* 清浮动 */
.clear { display:block !important; clear:both; height:0px; line-height:0px; font-size:0 }

/* 常用,采用单词首字母缩写方式命名:保持良好的命名风格很重要 :) */
.tdn { text-decoration:none } /* 链接无下划线 */
.ofh { overflow:hidden } /* 溢出隐藏 */
.tal { text-align:left } /* 内容左对齐 */
.tar { text-align:right } /* 内容右对齐 */
.tac { text-align:center } /* 内容居中 */
.fl { float:left } /* 左浮动 */
.fr { float:right } /* 右浮动 */
.m0a { margin:0 auto } /* 容器内水平居中 */
.bn { border:0 none !important; } /* 无边框 */


3、技巧积累(持续补充...)

1)利用 margin: 0 auto; 实现水平居中,必须同时定义容器的宽度(width)才会有效果;

2)关于Border的写法,如果您想定义div的四个边的颜色不同,而粗细和样式都一样,您可以这样写:
div.border2 { border:1px solid; border-color:color1 color2 color3 color4 }
四种颜色依次是上,右,下,左的颜色

3)兼容所有的浏览器都可以显示半透明效果的写法
.alpha50 {
filter: alpha(opacity=50); /* 支持 IE 浏览器 */
-moz-opacity: 0.5; /* 支持 FireFox 浏览器 */
opacity: 0.5; /* CSS标准.该属性支持firefox, Safari和 Opera */
}

4)使用media指令引入两种CSS:打印版本的css和屏幕显示的css

5)我们可以使用page-break-after,page-break-before控制打印时的分页

6)使用缩进(text-indent)显示图片,而隐藏文字(对SEO友好)

.logo { background: url(xxx.gif) no-repeat; width:160px; height:60px; text-indent: -2000px; }
< h1 class="logo" > 在售产品 < / h1 >

7)100%的高度
为了让 < div id="content" >< /div > 容器自动延伸到整个页面的高度,我们需要告诉和容器高度应为整个页面的高度。
html { min-height: 100%; _height:100%; }
body { margin: 0; padding: 0; min-height: 100%; _height:100%; }
#content { padding: 0 20px 0 20px; margin: auto; font: 1.5em arial, verdana; width: 960px; min-height: 100%; _height:100%; }


8)跨浏览器的盒阴影效果实例页面
.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

9)哀悼日网站灰化CSS代码

html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

【声明】本文章系本站编辑转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请与本站联系,我们将在第一时间删除内容!
上一篇 上一篇:色彩给我们的视线感觉
下一篇 下一篇:如何让服务器支持shtml文件
返回维护知识
维护动态 网站维护案例 更多动态 维护动态
积木人展览展示
海德睿工程
创际门窗
天津雷公
利君云商
维护动态 行业动态 更多动态 维护动态
谷歌悄然删去人工智能团队网页中
谷歌Colab推出数据科学助手
天价域名再现:ai.com挂牌
京东云发布八大领先智算产品 五
全球开源大模型榜单揭晓,阿里通
维护动态 网站维护知识 更多动态 维护动态
网站中木马了怎么办,怎么清除?
企业建设网站的好处
网站维护的工作内容有哪些?
制作网站需要关注这些核心要素
网站优化中十分影响排名的是什么
网站维护申请 网站维护申请点此进入 网站维护意见反馈 反馈意见

网站维护电话咨询

返回顶部
关于我们 | 案例分享 | 维护套餐 | 维护申请 | 意见反馈 | 维护知识 | 行业动态 | 联系方式
2025 © 网站维护 www.weihula.com 版权所有