【www.shanpow.com--热门范文】
【一】:浏览器兼容性案例分析
浏览器兼容性案例分析：
1. 不同浏览器的标签默认的外补丁和内补丁不同
问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。 碰到频率:100%
解决方案：CSS里 *{margin:0;padding:0;}
备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。
2. IE6下不支持png图片
问题症状：IE6下不显示png图片。
碰到频率:100%
解决方案：
<!--[if IE 6]>
<script type="text/javascript" src="sc/png.js"></script>
<![endif]-->
<!--[if IE 6]>
<script type="text/javascript" src="sc/jquery.pngfix.pack.js"></script> <script type="text/javascript" src="sc/jquery.pngfix.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).pngFix();
});
</script>
<![endif]-->
3. IE6下不支持:hover
问题症状：IE6下不支持:hover。
碰到频率:100%
解决方案：改成js方法
4. 相同名称的样式被定义了多次，但不知道在定义在哪里
问题症状：相同名称的样式被定义了多次，但不知道定义在哪里，导致样式冲突。 碰到频率:100%
解决方案：最简单的办法是在样式后面添加!important，这样可以保持这个样式一直被调用。 .bHidden
{
display:none !important;
}
5.单行双列自适应宽度，IE6中出现错行现象解决办法
问题症状：
调整单行双列自适应宽度布局，随着浏览器窗口大小自动改变left和right层的宽度。代码如下： <style type="text/css">
*{margin:0; padding:0;}
#main{width:100%;}
#left,#right{height:50px; float:left;}
#left{width:25%; background:#ccc;}
#right{width:75%; background:#939393;}
</style>
</head>
<body>
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
运行以上代码，在IE6中偶尔会出现错行现象：
主要原因：在IE6中采用四舍五入的方法计算宽度，那么随着浏览器窗口的大小调整，left和right按25%、75%计算，四舍五入，(left+right)总宽度会大于浏览器窗口宽度即（main)宽度，right层就会自动跳行至左侧浮动。
碰到频率:100%
解决方案：
在#right样式中添加：clear:right;代码。如
#right{width:75%; clear:right;background:#939393;}
6. 块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性
7. 设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
8.行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
解决方案：在display:block;后面加入display:inline;display:table;www.shanpow.com_配机方案兼容性分析。
9.图片默认有间距
解决方案：使用float属性为img布局
10.标签最低高度设置min-height不兼容
解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
【二】:最全整理浏览器兼容性问题与解决方案
常见浏览器兼容性问题与解决方案
所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。 在学习浏览器兼容性之前，我想把前端开发人员划分为两类：
第一类是精确按照设计图开发的前端开发人员，可以说是精确到1px的，他们很容易就会发现设计图的不足，并且在很少的情况下会碰到浏览器的兼容性问题，而这些问题往往都死浏览器的bug，并且他们制作的页面后期易维护，代码重用问题少，可以说是比较牢固放心的代码。
第二类是基本按照设计图来开发的前端开发人员，很多细枝末节差距很大，不如间距，行高，图片位置等等经常会差几px。某种效果的实现也是反复调试得到，具体为什么出现这种效果还模模糊糊，整体布局十分脆弱。稍有改动就乱七八糟。代码为什么这么写还不知所以然。这类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一个浏览器。改来改去也毫无头绪。其实他们碰到的兼容性问题大部分不应该归咎于浏览器，而是他们的技术本身了。
文章主要针对的是第一类，严谨型的开发人员，因此这里主要从浏览器解析差异的角度来分析兼容性问题。
浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同
问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
碰到频率:100%
解决方案：CSS里 *
备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。
浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
问题症状:常见症状是IE6中后面的一块被顶到下一行
碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）
解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性
备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。
浏览器兼容问题三：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度 碰到频率：60%
解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。
浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
问题症状：IE6里的间距比超过设置的间距
碰到几率：20%
解决方案：在display:block;后面加入display:inline;display:table;
备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。
浏览器兼容问题五：图片默认有间距
问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
碰到几率：20%
解决方案：使用float属性为img布局
备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用）
浏览器兼容问题六：标签最低高度设置min-height不兼容
问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容
碰到几率：5%
解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !; height:200px; overflow:visible;}
备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。
浏览器兼容问题七：透明度的兼容CSS设置
做兼容页面的方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。
1. /* CSS hack*/
1. 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。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。
在网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIV CSS设计的网，就应该更注意IE6 IE7 FF对CSS样式的兼容，不然，你的网乱可能出去不想出现的效果！
所有浏览器 通用
height: 100px;
IE6 专用
_height: 100px;
IE6 专用
*height: 100px;
IE7 专用
*+height: 100px;
IE7、FF 共用
height: 100px !important;
一、CSS 兼容
以下两种方法几乎能解决现今所有兼容.
1, !important (不是很推荐，用下面的一种感觉最安全)
随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)
代码: <style>
#wrapper {
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>
2, IE6/IE77对FireFox <from 针对firefox ie6 ie7的css样式>
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
代码:
<style>
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
</style>
注意:
*+html 对IE7的兼容 必须保证HTML顶部有如下声明：
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
二、万能 float 闭合(非常重要!) 可以用这个解决多个div对齐时的间距不对，
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.
代码:
<style> /* Clear Fix */ .clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>
***********************************************************************************************************************
三、其他兼容技巧(相当有用)
1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
2, 居中问题.
1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vetical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)
3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航
【三】:小型网吧设计方案范文3篇
近年来，随着网络的发展，网吧也如雨后春笋般出现，越来越受广大网络爱好者的青睐，同时也作为一种商业形式被一些有敏锐眼光的经商人士看中。因此，搭建一个中小型的网吧网络，投资较少的金钱，便可以获得可观的利润，因此吸引很多有远见的投资者。下面是小型网吧设计方案，欢迎阅读。
小型网吧设计方案1
一、需求分析
1.简述
小型网吧虽然营业面积相对较小，计算机数量也相对较少，除了设备好，环境是很重要的。网络拓朴结构简单，容易管理，但由于用户访问服务器频繁，常出现服务器接入瓶颈，为用户访问网络资源造成不便。因此，本解决方案采用二层结构:核心层和用户接入层，采用先进的快速以太网技术实现交换机之间的级联，以满足普通的浏览、聊天、收发邮件、游戏等，以及大量的对影视服务器和游戏服务器的访问，中心交换机采用des_3526/3550交换机，把所有的服务器直接连接到中心交换机上，以提高网络的吞吐率和交换速度。以便于网友们更方便的使用网络资源，并以此增加本网吧的盈利。
2.用户要求
满足消费者的要求,为各类应用系统提供方便、快捷的信息通路;具有良好的性能，能够支持大容量和实时性的各类应用;能够可靠运行，具有较低的故障率和维护要求。提供网络安全机制，满足集团信息安全的要求，具有较高的性价比，未来升级扩展容易，保护用户投资;用户使用简单，为用户提供良好的售后服务。
3.系统要求
网络协议采用TCP/IP协议，整个网络应考虑语音、视频、数据等的综合应用。交换机要求采用主流、成熟、信誉和售后服务均佳的产品，支持VLAN等功能，能较好解决突发数据量和密集服务请求的实时响应问题，在内部用户终端进行视频信号、数据交换时交换引擎不会出现过载现象和数据包碰撞、丢失的现象，还要考虑预防瓶颈出现和补救的相应措施。下属单位接入交换机可采用相对低一档的产品;本系统处理的信息包括数据、语音和图像等，因此要考虑实时性问题，特别要考虑包括视频会议在内的信息共享等方面的实时性要求;UPS电源的配备，配置要保证网络中所有的服务器、交换机、路由器、集线器等设备的连续、正常地运转;网络带宽的分配：应根据所属单位网络的信息流量情况合理分配网段，以充分利用网络带宽，提高网络的运行效率。网络需要需要具有多主机跨平台主机连接能力,数据集中存放、集中管理、数据有效共享、存储空间共享、统一安全备份，为全面集中管理和数据仓库的建设奠定坚实的基础。
配置简单方便：所有的客户端和服务器系统应该是易于配置和管理的，并保障客户端的方便使用;广泛的设备支持：所有操作系统及选择的服务应尽量广泛的支持各种硬件设备;稳定性及可靠性：系统的运行应具有高稳定性，高性能无故障运行。可管理性：系统中应提供尽量多的管理方式和管理工具，便于系统管理员在任何位置方便的对整个系统进行管理;更低的成本：系统设计应尽量降低整个系统的成本;安全性：在系统的设计、实现及应用上应采用多种安全手段保障网络安全。网络还应具有开放性、可扩展性及兼容性，全部系统的设计要求采用开放的技术和标准选择主流的操作系统及应用软件，保障系统能够适应未来几年网吧发展需求，便于网络的扩展。FTP、WWW、Telne
