-想您所想,多年经验-
白狐广告电话
白狐广告标志
当前位置:网站首页 - 信息中心
兼容各种浏览器和各种大小的分辨率
2011-3-18|阅:2692|来自:admin5.com
兼容各种浏览器和各种大小的分辨率
  先说一下我的两个站吧!http://www.wufggguige.net.cn  http://www.yoga678.com
   现在作为一个网站前端制作,真是太不容易了.作出的网页一定要兼容各种.  W3C推荐web2.0标准.
主要技术:xhtml css+div javascript构建;当今流行的浏览器(如:Firefox、Opera、InternetExplorer、Chrome、Safari等等)中,有一些都是以自己的方式去理解CSS规范,这就会导致有的浏览器对CSS的解释与设计师的CSS定义初衷相冲突,使得网页的样子在某些浏览器下能正确按照设计师的想法显示,但有些浏览器却并没有按照设计师想要的样子显示出来,这就导致浏览器的兼容性问题。更糟的是,有的浏览器完全无视CSS的一些声明和属性。
    正因为上述冲突和问题依然存在于这个”不完美的世界”,所以一些设计师想到了一种避免浏览器兼容性问题的方法,那就是CSS Reset,什么是CSS Reset?我们可以把它叫做CSS重设,也有人叫做CSS复位、默认CSS、CSS重置等。CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的规则解释CSS,这样就能避免发生这种问题。
    在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视觉效果(没有兼容性问题)。但是,我们并没有生活在这个完美的世界,现实中发生的失窃却总是恰恰相反,很多CSS样式在不同的浏览器中有着不同的解释和呈现。
    样式重新避免浏览器兼容性问题的方法,那就是CSS Reset;我下面我经常用的样式重设CSS代码.
    html, body, div, span, applet, object, iframe, table, caption, 
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, 
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, 
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend { 
     vertical-align: baseline; 
     font-family: inherit; 
     font-weight: inherit; 
     font-style: inherit; 
     font-size: 100%; 
     outline: 0; 
     padding: 0; 
     margin: 0; 
     border: 0; 

:focus { 
     outline: 0; 

body { 
     background: white; 
     line-height: 1; 
     color: black; 

ol, ul { 
     list-style: none; 

table { 
     border-collapse: separate; 
     border-spacing: 0; 

caption, th, td { 
     font-weight: normal; 
     text-align: left; 

blockquote:before, blockquote:after, q:before, q:after { 
     content: “”; 

blockquote, q { 
     quotes: “” “”; 
}

我再给出一些经常使用的css hack技术

p {
 color:#000;  //ff
}
*+html p {
 color:#aaa;  //ie7
}
* html p {
 color:blue;  //ie6


@media all and (min-width: 0px) {
p {
color:yellow;  //opera
}
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
 p {
 color:red;  //safari
}
}

/*/p{ color:#1e90ff}*/    //ie8
>color:green !important  //ie8

<meta http-equiv="X-UA-Compatible" content="IE=7" />//IE8折回IE7

   主流浏览器主要有Internet explorer6.0 Internet Explorer 7.0  Mozilla Firefox2.0 
Opera   Safari   Safari  腾讯TT.设计出高质量DIV+CSS的页面布局,是一件很不容易的事情.第一要让设计出的页面效果不同浏览器和不同分辨率有同样的效果,这就是DIV+CSS的兼容非常不好.
我觉得最好的方法就是通过javascriptF判断浏览器和显示器的分辨率客户信息动态加载样式表.但是显示器的分辨率可以能过margin:0 auto;text_align:center;的居中方式来解决显示器的分辨率.这个问题很简单的,等一下我通过一个例子来演示.
下面是通过一段javascript判断浏览器客户信息动态加载样式表.

<!--根据不同浏览器动态加载样式表-->
<script language="javascript">
<!--
//根据不同浏览器动态加载样式表

if(window.navigator.userAgent.indexOf("MSIE 8.0")>=1){
  //如果浏览器为IE 8.0
  setActiveStyleSheet("IE8.0_index_layout.css");
}
else if(window.navigator.userAgent.indexOf("MSIE 7.0")>=1){
  //如果浏览器为IE 7.0
  setActiveStyleSheet("IE7.0_index_layout.css");
}
else if(window.navigator.userAgent.indexOf("TencentTraveler")>=1){
  //如果浏览器为腾讯TT
  setActiveStyleSheet("TT_index_layout.css");
}
else if(window.navigator.userAgent.indexOf("Maxthon")>=1){
  //如果浏览器为傲游
  setActiveStyleSheet("Maxthon_index_layout.css");
}
else if(window.navigator.userAgent.indexOf("MSIE 6.0")>=1){
  //如果浏览器为IE 6.0
  setActiveStyleSheet("IE6.0_index_layout.css");
}
else if(window.navigator.userAgent.indexOf("Firefox")>=1){
  //如果浏览器为Firefox
  setActiveStyleSheet("FF_index_layout.css");
}
else if(window.navigator.userAgent.indexOf("Safari")>=1){
  //如果浏览器为Safari
  setActiveStyleSheet("Safari_index_layout.css");
}
else if(window.navigator.appName=="Opera"){
  //如果浏览器为Opera
  setActiveStyleSheet("Opera_index_layout.css");
}
else{
  //如果浏览器为其它
  setActiveStyleSheet("default_index_layout.css");
}
function setActiveStyleSheet(filename){ 
  document.write("<link href=\"css\/one\/"+filename+"\" type=\"text\/css\" rel=\"stylesheet\">");
}

//-->
</script>

出处:http://www.wufggguige.net.cn http://www.yoga678.com

标 签: 浏览器 css 兼容 分辨率

www.internetzg.com Copyright 2011-2020 | 以上内容白狐广告保留解释权,任何个人或单位不得抄袭COPY本公司网站内容,违者必究。

 

↑上一篇文章: ASP实用函数库
返回目录    ↓下一篇文章: 404页面该怎么做?

白狐网站建设 白狐设计专门从事网站建设平面广告设计,专业致力于为企业及个人提供优质网站设计(网站建设、网站改版)网站优化推广域名空间画册设计(企业画册设计、产品画册设计、样本设计)印刷彩页单页设计印刷名片T恤衫设计制作台历挂历设计制作标志设计( LOGO设计、商标设计)产品包装设计制作艺术照片设计等。公司是由一流的设计师和专业的制作人员组成的运营团队,拥有多年的网站及广告设计制作经验,服务客户遍及北京、河北、山东、江苏等地区。
首 页 | 关于白狐 | 网站建设 | 平面广告 | 产品服务 | 合作伙伴 | 人才招聘 | 友情链接 | 网站地图 | 联系我们 | 站内搜索
白狐广告www.internetzg.com 网站最佳分辨率为1024*768 京ICP备06068476号
白狐广告服务电话:010-53312027 
13693231513技术 13522191688业务 15011320345售后 15810850699优化
北京网站建设,手机网站建设,北京网站建设公司,北京 北京白狐广告有限责任公司 版权所有
白狐广告公司地址:北京市朝阳区朝阳路8号朗廷大厦A座312室 邮编:100024
返回白狐广告顶部