博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
常见css的兼容问题
阅读量:4986 次
发布时间:2019-06-12

本文共 5853 字,大约阅读时间需要 19 分钟。

链接的虚线框问题

/* * a, img, input等标签点击时会带有虚线框 * 去除它*/.noDashedBox {
outline:0; blur:expression(this.onFocus=this.blur());}

固定定位

/*  css  */.fixedTop {
position:fixed; top:100px; left:50%; margin-left:500px; _position:absolute; _top:expression(eval(document.documentElement.scrollTop + 100));}.fixedBottom {
position:fixed; bottom:50px; left:50%; margin-left:500px; _position:absolute; _top:expression(eval(document.documentElement.scrollTop + document.documentElement.clientHeight - 70));} /* ie6 调动问题 */ body {
  _background-attachment: fixed;   _background-image: url(about:blank); }

png背景图片透明:for ie6

/* * http://www.zhangxinxu.com/wordpress/2009/08/ +  * ie6%E4%B8%8Bpng%E8%83%8C%E6%99%AF%E4%B8%8D%E9%80%8F%E6%98%8E%E9%97%AE%E9%A2%98%E7%9A%84%E7%BB%BC%E5%90%88%E6%8B%93%E5%B1%95/ * * ie6 png8 background 不能定位*/.pngOpacity {
height:228px; background:url(http://www.zhangxinxu.com/study/image/png_test.png) no-repeat; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='http://www.zhangxinxu.com/study/image/png_test.png');}
// png透明的js解决方案  http://www.zhangxinxu.com/study/js/png.jsif (!window.XMLHttpRequest) {    window.attachEvent("onload", enableAlphaImages);}function enableAlphaImages(){    for (var i=0; i
} } }

ie6 png 图片透明的另外一段js代码

/* * ie6_png.js * 
* 如此在头部插入即可*/var DD_belatedPNG={ns:"DD_belatedPNG",imgSize:{},delay:10,nodesFixed:0,createVmlNameSpace:function(){
if(document.namespaces&&!document.namespaces[this.ns]){document.namespaces.add(this.ns,"urn:schemas-microsoft-com:vml")}},createVmlStyleSheet:function(){
var b,a;b=document.createElement("style");b.setAttribute("media","screen");document.documentElement.firstChild.insertBefore(b,document.documentElement.firstChild.firstChild);if(b.styleSheet){b=b.styleSheet;b.addRule(this.ns+"\\:*","{behavior:url(#default#VML)}");b.addRule(this.ns+"\\:shape","position:absolute;");b.addRule("img."+this.ns+"_sizeFinder","behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visibility:hidden;");this.screenStyleSheet=b;a=document.createElement("style");a.setAttribute("media","print");document.documentElement.firstChild.insertBefore(a,document.documentElement.firstChild.firstChild);a=a.styleSheet;a.addRule(this.ns+"\\:*","{display: none !important;}");a.addRule("img."+this.ns+"_sizeFinder","{display: none !important;}")}},readPropertyChange:function(){
var b,c,a;b=event.srcElement;if(!b.vmlInitiated){
return}if(event.propertyName.search("background")!=-1||event.propertyName.search("border")!=-1){DD_belatedPNG.applyVML(b)}if(event.propertyName=="style.display"){c=(b.currentStyle.display=="none")?"none":"block";for(a in b.vml){
if(b.vml.hasOwnProperty(a)){b.vml[a].shape.style.display=c}}}if(event.propertyName.search("filter")!=-1){DD_belatedPNG.vmlOpacity(b)}},vmlOpacity:function(b){
if(b.currentStyle.filter.search("lpha")!=-1){
var a=b.currentStyle.filter;a=parseInt(a.substring(a.lastIndexOf("=")+1,a.lastIndexOf(")")),10)/100;b.vml.color.shape.style.filter=b.currentStyle.filter;b.vml.image.fill.opacity=a}},handlePseudoHover:function(a){setTimeout(function(){DD_belatedPNG.applyVML(a)},1)},fix:function(a){if(this.screenStyleSheet){var c,b;c=a.split(",");for(b=0;b
n.H){i.B=n.H}d.vml.image.shape.style.clip="rect("+i.T+"px "+(i.R+a)+"px "+i.B+"px "+(i.L+a)+"px)"}else{d.vml.image.shape.style.clip="rect("+f.T+"px "+f.R+"px "+f.B+"px "+f.L+"px)"}},figurePercentage:function(d,c,f,a){var b,e;e=true;b=(f=="X");switch(a){case"left":case"top":d[f]=0;break;case"center":d[f]=0.5;break;case"right":case"bottom":d[f]=1;break;default:if(a.search("%")!=-1){d[f]=parseInt(a,10)/100}else{e=false}}d[f]=Math.ceil(e?((c[b?"W":"H"]*d[f])-(c[b?"w":"h"]*d[f])):parseInt(a,10));if(d[f]%2===0){d[f]++}return d[f]},fixPng:function(c){c.style.behavior="none";var g,b,f,a,d;if(c.nodeName=="BODY"||c.nodeName=="TD"||c.nodeName=="TR"){
return}c.isImg=false;if(c.nodeName=="IMG"){
if(c.src.toLowerCase().search(/\.png$/)!=-1){c.isImg=true;c.style.visibility="hidden"}else{
return}}else{
if(c.currentStyle.backgroundImage.toLowerCase().search(".png")==-1){
return}}g=DD_belatedPNG;c.vml={color:{},image:{}};b={shape:{},fill:{}};for(a in c.vml){
if(c.vml.hasOwnProperty(a)){
for(d in b){
if(b.hasOwnProperty(d)){f=g.ns+":"+d;c.vml[a][d]=document.createElement(f)}}c.vml[a].shape.stroked=false;c.vml[a].shape.appendChild(c.vml[a].fill);c.parentNode.insertBefore(c.vml[a].shape,c)}}c.vml.image.shape.fillcolor="none";c.vml.image.fill.type="tile";c.vml.color.fill.on=false;g.attachHandlers(c);g.giveLayout(c);g.giveLayout(c.offsetParent);c.vmlInitiated=true;g.applyVML(c)}};try{document.execCommand("BackgroundImageCache",false,true)}catch(r){}DD_belatedPNG.createVmlNameSpace();DD_belatedPNG.createVmlStyleSheet();// ie6 png 透明DD_belatedPNG.fix(".png");
View Code

opacity透明:整个元素透明,包括元素里面的内容

this is opacity text
this is text that not opacity in ie
.opacity {
background: #000; filter:alpha(opacity=50); *zoom:1; /* sometimes it is needed */ opacity: 0.5; font-size: 38px; color:#fff; }

rgba透明:只对背景透明,内容不会受到影响

red green blue and alpha
/* css */.rgbaAlpha {
width:300px; height:auto; padding:50px; filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000); background: rgba(0, 0, 0, 0.5); font-size: 38px; color:#fff;}

 ie6 border边框断线问题

 清除浮动

/*  * _height:1% * 触发了ie6的layout布局,能解决很多奇怪的问题 * 详细链接:http://adamghost.com/2008/12/ie-haslayout-%E8%AF%A6%E8%A7%A3/*/.clearfix{
overflow:auto;_height:1%;}

 

转载于:https://www.cnblogs.com/xiankui/p/3779945.html

你可能感兴趣的文章
QC邮件转发工具Mail Direct安装配置手册
查看>>
vue组件父子之间相互通信案例
查看>>
OC源文件扩展名
查看>>
解决MYSQL-JDBC连接后报错
查看>>
poj 3422(最小费用最大流)
查看>>
启动Genymotion时报错Failed to initialize backend EGL display
查看>>
JavaScript与Objective-C之间的通信
查看>>
linux目录的读(r)、写(w)、执行(x)权限说明
查看>>
让Apache支持shtml实现include文件解析的配置方法
查看>>
Beta 冲刺(6/7)
查看>>
PHP之string之ltrim()函数使用
查看>>
行为型模式之中介者模式
查看>>
解题:洛谷3674 小清新人渣的本愿
查看>>
Python 3中字符串可以被改变吗?
查看>>
浅析Linux内核调度
查看>>
[转] Makefile 基础 (9) —— Makefile 使用make更新函数库文件
查看>>
Div自适应高度的方法
查看>>
Mha-Atlas-MySQL高可用
查看>>
集合与函数
查看>>
700. Search in a Binary Search Tree
查看>>