游戏攻略网站开发,小型电子商务网站规划,响应式网站 哪些,建立美好国家的办法一、CSS
1、浏览器的兼容性问题-CSS 盒子模型(Box Model) 一旦为页面设置了恰当的 DTD#xff0c;大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范#xff0c;元素内容占据的空间是由 width 属性设置的#xff0c;而内容周…一、CSS
1、浏览器的兼容性问题-CSS 盒子模型(Box Model) 一旦为页面设置了恰当的 DTD大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范元素内容占据的空间是由 width 属性设置的而内容周围的 padding 和 border 值是另外计算的。不幸的是IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是不要给元素添加具有指定宽度的内边距而是尝试将内边距或外边距添加到元素的父元素和子元素。
IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。
解决IE8及更早版本不兼容问题可以在HTML页面声明 !DOCTYPE html即可。
box-sizing 用来告诉浏览器该使用哪种盒模型来渲染文档。
content-box 是默认的盒子模型即 W3C 标准盒子模型现如今所有主流浏览器都支持并使用该模型渲染布局包括 IE。但麻烦却是一堆堆的因为在这模型下border与padding的设置会破坏元素的尺寸导致最终展现出来的布局效果并不符合理想效果而如果想要达到理想效果又需要去计算宽高非常麻烦。
别的属性是越标准越好用但这个属性却是反向向IE标准的
而 border-box 则指 IE盒子模型也称为“怪异盒子模型”。此模型下边框和填充并不会影响元素的宽高相当于是将元素的空间霸占成自己的空间元素总体大小不变内容空间变小边框、填充则霸占着原本属于内容空间的地方。这在平时设计布局时就非常的舒服因为在指定元素尺寸并设置该属性值后元素尺寸就不会因被破坏而又得重新计算了。 2、浏览器的兼容性问题-左右对齐使用 position: absolute方式或者 float 方式
当使用 position 来对齐元素时, 通常 body 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。当使用 position 属性时IE8 以及更早的版本存在一个问题。如果容器元素在我们的案例中是 div classcontainer设置了指定的宽度并且省略了 !DOCTYPE 声明那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时请始终设置 !DOCTYPE 声明。
当使用浮动属性float对齐,总是包括 !DOCTYPE 声明!如果丢失,它将会在 IE 浏览器产生奇怪的结果。 3、浏览器的兼容性问题-列表样式ul li
IE和Opera显示图像标记比火狐Chrome和Safari更高一点点。
如果你想在所有的浏览器放置同样的形象标志就应使用浏览器兼容性解决方案过程如下
ul
{list-style-type: none;padding: 0px;margin: 0px;
}
4、浏览器的兼容性问题-opacity透明度
IE9FirefoxChromeOpera和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小使得元素更加透明。
IE8和早期版本使用滤镜alphaopacity x。 x可以采取的值是从0 - 100。较低的值使得元素更加透明。
{opacity:0.4;filter:alpha(opacity40); /* IE8 及其更早版本 */
}
5、浏览器的兼容性问题-CSS3
Internet Explorer 10, Firefox, 和 Opera支持transform 属性.
Chrome 和 Safari 要求前缀 -webkit- 版本.
注意 Internet Explorer 9 要求前缀 -ms- 版本 -transform转换 {transform:rotate(30deg);-ms-transform:rotate(30deg); /* IE 9 */-webkit-transform:rotate(30deg); /* Safari and Chrome */
} -transition过渡 div {width: 100px;height: 100px;background: red;-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */transition: width 2s, height 2s, transform 2s;
}div:hover {width: 200px;height: 200px;-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */transform: rotate(180deg);
} -animation动画 {width:100px;height:100px;background:red;animation:myfirst 5s;-webkit-animation:myfirst 5s; /* Safari and Chrome */
}keyframes myfirst
{from {background:red;}to {background:yellow;}
}-webkit-keyframes myfirst /* Safari and Chrome */
{from {background:red;}to {background:yellow;}
} -Gradients渐变 {height: 200px;background-color: red; /* 不支持线性的时候显示 */background-image: linear-gradient(to bottom right, red , yellow);
} -字体文件格式
Internet Explorer 9 只支持 .eot 格式的字体.
font-face
{font-family: myFirstFont;src: url(Sansation_Light.ttf),url(Sansation_Light.eot); /* IE9 */
} CSS3 多列属性 div {/*多列*/-webkit-column-count: 3; /* Chrome, Safari, Opera */-moz-column-count: 3; /* Firefox */column-count: 3;/*列宽度*/-webkit-column-width: 100px; /* Chrome, Safari, Opera */column-width: 100px;/*列间隙*/-webkit-column-gap: 40px; /* Chrome, Safari, Opera */-moz-column-gap: 40px; /* Firefox */column-gap: 40px;/*列间隙边框*/-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */-moz-column-rule: 1px solid lightblue; /* Firefox */column-rule: 1px solid lightblue;
} h2 {/*标题跨越多少列*/-webkit-column-span: all; /* Chrome, Safari, Opera */column-span: all;
} CSS3 用户界面resize、box-sizing、outline-offset
Internet Explorer和opera 不兼容 resize属性
Internet Explorer 也不兼容 outline-offset属性 css3 flex box弹性盒子 .flex-container{display: -webkit-flex;display: flex;-webkit-flex-direction: row-reverse;flex-direction: row-reverse;-webkit-justify-content: flex-end;justify-content: flex-end;-webkit-align-items: stretch;align-items: stretch;-webkit-flex-wrap: nowrap;flex-wrap: nowrap;
}
6、浏览器的兼容性问题-HTML5
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
IE9 以下版本浏览器兼容HTML5的方法使用本站的静态资源的html5shiv包
!--[if lt IE 9]script srchttp://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js/script
![endif]--载入后初始化新标签的CSS /*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}二、JavaScript
1、浏览器的兼容性问题-addEventListener()
IE 8 及更早 IE 版本Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:
element.attachEvent(event, function);
element.detachEvent(event, function);
实例
跨浏览器解决方法:
var x document.getElementById(myBtn);
if (x.addEventListener) { // 所有主流浏览器除了 IE 8 及更早版本x.addEventListener(click, myFunction);
} else if (x.attachEvent) { // IE 8 及更早版本x.attachEvent(onclick, myFunction);
} 2、浏览器的兼容性问题-Window 尺寸
有三种方法能够确定浏览器窗口的尺寸。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari
window.innerHeight - 浏览器窗口的内部高度(包括滚动条)window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
对于 Internet Explorer 8、7、6、5
document.documentElement.clientHeightdocument.documentElement.clientWidth
或者
document.body.clientHeightdocument.body.clientWidth
实用的 JavaScript 方案涵盖所有浏览器
var wwindow.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;var hwindow.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight; 3、设备的兼容性问题-Javascript 判断是移动端浏览器还是 PC 端浏览器
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {document.write(移动)
} else {document.write(PC)
}
4、设备的兼容性问题-JavaScript 判断是否微信浏览器
function is_weixn(){ var ua navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)micromessenger) { return true; } else { return false; }
} if( is_weixn() ) {document.write(微信浏览器)
} else {document.write(其他浏览器)
}
