网页设计如何解决兼容性问题

2016-08-18 分类：网站建设

firefox下div容器定义height后，div不会因为内容超出height而撑大，而i6e下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。下面介绍网页设计如何解决兼容性问题，希望对您有所帮助。

1. 文字大小不兼容

同样14px的宋体字，ie下实际占高16px，下留白3px，firefox下实际占高17px，上留白1px，下留白3px。

文字大小不兼容解决方案：给所有文字设定通用line-height值

2.div高度不兼容

firefox下div容器定义height后，div不会因为内容超出height而撑大，而i6e下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。

div高度不兼容解决方案：如果设置高度，需要同时把内容物高度限定，也就是溢出隐藏处理：overflow:hidden;或者当需要随着内容自适应高度，但又想div有一个最小的高度时候，像这样做min-height: 1400px;max-height:none;_height: 1400px;

3.div宽度不兼容

如果div容器设定float浮动但没设定宽度，那么也会出现ie6和firefox的不兼容。firefox下内容会撑开容器渗入它前面的div，ie6下该div内容折行而不是我们想象的与同级div在同一行。

div宽度不兼容解决方案：浮动div容器一般需定义width。

4.div浮动不兼容

当前面div有左浮动和右浮动，下面div就会受他们影响也有浮动。ie也许不用加清除，但firefox下不清除浮动是不行的。

div浮动不兼容解决方案：给下面的div设定清除 clear:both;

5. double-margin不兼容

ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。

解决方案：给浮动容器定义display:inline。

6. mirror margin不兼容

当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px.padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。引申：ff 和ie 下对容器的margin-bottom，padding-bottom的解释有时不一致，似乎与之相关。

解决方案：外层元素设定border 或设定float。

7.吞吃现象

还是ie6，上下两个div，上面div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。

解决方案：使用zoom:1.这个zoom好象是专门为解决ie6 bug而生的。

8.注释也能产生bug

多出来的一只猪，这是前人总结这个bug使用的比喻。ie6下这个bug，大家会在页面看到猪字出现两遍，重复内容量因注释的多少而变。

解决方案：用 picRotate start 方法写注释。

网页设计必须把握的问题

1、网站的主题规划。注意不让你的网站主题过于分散。因为主题性强的网站，内容更集中，网站所有者一般在这方面要投入的精力会更多，所以所提供的信息的质量会更高。我们知道，搜索引擎一直致力于提供高质量的信息搜索服务，因此它将提供有价值的信息，网站的排名提前，优先返回给用户。

如果网站覆盖范围广，它还需要保留了许多的主题，那怎么办?相同原理，只要你的网站信息被安排合理，会形成一个相对集中的主题，那么搜索引擎会给你的网站排名靠前。

2、flash。虽然FLASH有更好的网页的视觉效果，但搜索引擎不太喜欢，案例表明，这类网站很难被百度搜索引擎索引。提供Flash和非Flash网页两种选择是明智的，这增加了网页访问量，又照顾到了搜索引擎的情绪。

3、动态网页。任何地址带?”，“”(和其他类似的符号)的网页将在门口挡住蜘蛛。这类网页通常是通过CGI，PHP，ASP和其他程序，更先进的技术，而不是搜索引擎的“蜘蛛”程序。虽然一些主要的搜索引擎(如谷歌)已检索的动态网页的能力。即使它是能够索引动态网页的谷歌，也明确表示，并不能保证所有的动态网页都搜索到，除非它是一个非常大的网站，建议还是多使用静态网页等。

4、特效链接。经常看到有特殊效果的导航链接，一些网站，比如点击一个项目将扩大到较低层次的链接。这些效果通常通过Java脚本实现，这是一个新的视觉，但在“蜘蛛”程序的眼睛它却是不那么有吸引力，它不能解释这种联系。为了让搜索引擎顺利检索到你的网页，建议或牺牲了一些花哨的东西。

5、充实网站内容和网站的受到欢迎程度两个是相辅相成的，有一个内容丰富的网站通常是很受登陆者的欢迎。请注意，这里有着丰富的内容，不涉及复杂的，但涉及内容和深度。在该网站的搜索引擎排名，不仅看到了网页信息的相关性，同时也会考虑网站的声望。因此一个内容充实的网站会排在前面。不要在网页设计中只注重外表美。

6、框架结构。

有些搜索引擎(如FAST)是不支持框架结构的，他们的“蜘蛛”程序无法阅读这个网页。

7、图像块

除了AltaVista，谷歌和北极光(现已解散的公共搜索服务)明确支持图像块连接，其他引擎不支持。当“蜘蛛”程序遇到这种结构时，往往觉得不知所措。所以不要设置图像链接。

网页设计常见问题

1. 想不到内容的位置

人们使用它们找不到信息，许多网站提供的类别名称不完整，没有充分或准确地描述其中的内容，其他的安排是基于公司而不是用户对内容的想法。当网站结构不符合用户的信息组织方式的心理模型(mental models)时，人们无法找到他们需要的东西。

让用户参与创建你的网站结构，一些可用性工作(如卡片分类，决策树或可用性测试)可以在创建一个对用户有意义的网站结构方面发挥很大的作用。

ATT.com：有关旧手机交易的信息是在现有客户下，但用户在智能手机下查找。

2. 相互矛盾的连接和导航分类

当用户不能清楚区分相似的导航类别或链接时，他们很难找到恰当的内容路径。类别和链接名称本身需要有自己的涵义，同时也应该与站点上的其他选项结合。如果多个部分或页面可以满足特定的信息需求，用户必须探索每一个路径或努力做出最好的猜测。或者，他们可能会转向搜索甚至离开网站。

BAM建筑网站上的用户希望了解建设项目的细节，但不确定这些信息是否属于关于我们，公司业务，或者公司技术，大部分是从我们的产品开始，但该部分包含了组织为客户提供的工作类型的概述，而不是项目细节，项目信息和案例研究是我们的技术特色。

卡片分类和可用性测试有助于避免重叠类别名称，链接太相似的问题通常源于糟糕的内容策略。

造成这些问题的两个可能原因是：

标签相似：链接导致内容不同，但由于某种原因，它们有相似的标签。如果是这样的话，试着重命名你的链接来区分它们。

内容区分性差：如果高度信息相关的链接指向不同页面，解决方案可能不是重命名链接，而是重新组织和合并内容。

3. 信息孤岛

有些站点上的信息比较碎片化，分散在站点上，它们之间几乎没有连接。

当用户发现一个没有相关信息的信息孤岛时，他们没有理由认为网站的另一个区域提供了补充材料。如果用户需要更多的信息，他们会到竞争对手的网站或搜索谷歌。

试图重新访问信息的用户可能最终会选择在站点的另一个完全不同的领域，对内容的看法不同于第一次体验。那些找出不连贯信息的信息，拼凑起来。无论哪种方式，他们都对网站留下了负面的印象。

从组织的角度来看，这不仅是用户体验的失败，更是内容管理的噩梦：站点的某个区域的信息可能重复、不同或甚至与其他地方的信息相矛盾。

解决方案之一是在提供相关信息的页面之间添加相关链接，一个更好的解决方案是考虑为什么信息分散在整个网站，挑选适当的时候，并选择好位置。站点的其他区域可以引用关于该主题内容的位置，而不是复制信息。

4. 重复链接

即使用户已经知道他们所需要信息在网站中的位置，但他们依然可能会遭受意外或者漫长工作流的阻碍。

Web团队经常会问，要获取内容需要多少点击。没有确切的数字(no magic number)，点击质量的重要性要远远大于其数量。当用户在点击页面时应该更接近信息目标，用户在选择他们想到东西时需要重复的点击，这会一次又一次的激怒客户，并让他们进行了不必要的努力。

团队构建页面有时候会闭门造车，从而没有考虑到创建内容的流程。创建新页面时，要考虑用户如何到达那里并思考是否还有更直接的路径。

网站性能

性能是网站的一个重要指标，除非是没得选择(比如只能到 www.12306.cn 这一个网站上买火车票)，否则用户无法忍受一个响应缓慢的网站。一个打开缓慢的网站会导致严重的用户流失，很多时候网站性能问题是网站架构升级优化的触发器。可以说性能是网站架构设计的一个重要方面，任何软件架构设计方案都必须考虑可能会带来的性能问题。

也正是因为性能问题几乎无处不在，所以优化网站性能的手段也非常多，从用户浏览器到数据库，影响用户请求的所有环节都可以进行性能优化。在浏览器端，可以通过浏览器缓存、使用页面压缩、合理布局页面、减少 Cookie 传输等手段改善性能。

还可以使用 CDN，将网站静态内容分发至离用户最近的网络服务商机房，使用户通过最短访问路径获取数据。可以在网站机房部署反向代理服务器，缓存热点文件，加快请求响应速度，减轻应用服务器负载压力。

在应用服务器端，可以使用服务器本地缓存和分布式缓存，通过缓存在内存中的热点数据处理用户请求，加快请求处理过程，减轻数据库负载压力。也可以通过异步操作将用户请求发送至消息队列等待后续任务处理，而当前请求直接返回响应给用户。

在网站有很多用户高并发请求的情况下，可以将多台应用服务器组成一个集群共同对外服务，提高整体处理能力，改善性能。在代码层面，也可以通过使用多线程、改善内存管理等手段优化性能。

在数据库服务器端，索引、缓存、SQL 优化等性能优化手段都已经比较成熟。而方兴未艾的 NoSQL 数据库通过优化数据模型、存储结构、伸缩特性等手段在性能方面的优势也日趋明显。

衡量网站性能有一系列指标，重要的有响应时间、TPS、系统性能计数器等，通过测试这些指标以确定系统设计是否达到目标。这些指标也是网站监控的重要参数，通过监控这些指标可以分析系统瓶颈，预测网站容量，并对异常指标进行报警，保障系统可用性。

对于网站而言，性能符合预期仅仅是必要条件，因为无法预知网站可能会面临的访问压力，所以必须要考察系统在高并发访问情况下，超出负载设计能力的情况下可能会出现的性能问题。网站需要长时间持续运行，还必须保证系统在持续运行且访问压力不均匀的情况下保持稳定的性能特性。

分享标题：网页设计如何解决兼容性问题
链接地址：https://www.cdcxhl.com/news36/41686.html

成都网站建设公司_创新互联，为您提供营销型网站建设、ChatGPT、软件开发、用户体验、App开发、网站内链

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容