导航:首页 > 万维百科 > 网页设计时怎样兼容各浏览器

网页设计时怎样兼容各浏览器

发布时间:2021-03-29 15:24:54

1、网页在设计的时候,应该怎么考虑不同浏览器的兼容

设计是不需要考虑浏览器,只有在做成静态页面,也就是要给程序员用 就要考虑js css兼容浏览器的问题了。最好各个版本的浏览器都测试下。如果还有问题就是程序员的问题了 。。

2、网页设计中如何解决浏览器兼容问题?

1. 目标不居中;
一般新手都爱出现这个问题,主要原因是对盒子模型不够理解,如果发现你的页面没有居中,基本上有两种情况:
a. 如果是在浏览器中没有居中,就是没盒子,就是要用一个大DIV把所有需要居中元素装起来,然后给盒子一个css样式margin:0 auto;
b. 如果想要盒子内的元素居中,必须定义盒子的绝对宽度,然后给盒子一个CSS样式text-align:center;

2. 目标在不同浏览器上的位置不同;
a. 首先不要去急着找hack,先看一下自己的代码有没有错误,DW里有一个“检查浏览器兼容性”功能特别实用;
b. 然后,尽量让目标的位置初始化,使之在所有浏览器都处在同一个位置,这个条件的前提是,不写hack,最后再一个方位一个方位调整。

3. 目标与目标之间距离在各个浏览器上的区别;
a. 给其中一个目标加背景颜色;
b. 观察背景色与另外一个目标的距离,查看是不是这个目标造成的距离问题
c. 如果不是上一个目标,那就给另外一个目标也加上背景颜色。
d. 这样很容易判断出那个目标造成的原因,就针对那个目标进行修改。

4. IE6兼容问题最多的一个,浮动问题。
a. flaot浮动造成IE6下面双倍边距问题,这个最常见,也最好处理,解决方法:
只需要给这个DIV加一个样式:display:inline;
b. 布局的时候经常会遇到这种情况:发现有一个DIV浮动了,接下来的一个DIV本来是要在下面显示的,结果跑上面去了,这种情况一般在FF下面会出现。
解决的办法:清除浮动,在设置过浮动的那个DIV下面加一个DIV,给个样式clear:both;如下
<div style="float:left;height:100px; width:500px;"> <div style="clear:both;"> <div style="height:100px; width=300px">

5. IE8兼容问题
ie8下兼容问题,这个最好处理,转化成ie7兼容就可以。在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了 <meta http-equiv="x-ua-compatible" content="ie=7" />

6. 背景兼容问题
有的时候明明给一个DIV加了背景颜色或背景图片,但是却显示不出来或者显示不全。
解决办法:首先,有可能是DIV没有设置绝对高度。如果设置了宽度和高度还没有效果,那么给DIV一个样式display:block;(通常a:hover加背景的时候经常遇到)。
另外,如果高度必须要设置成自动的话,那么就给DIV一个样式overflow:hidden;

7. IE7和Firefox兼容问题
很多朋友DIV+CSS的时候,会出现,在IE的几个浏览器下都好使,就是FF下有问题。
解决方法:height:100px;/*FF下显示100的高*/ +height:120px;/*IE678下显示120高*/
原理:FF不识别加过符号的属性,而IE识别。

3、请问下,网页设计时,如何处理不同的浏览器

基本上所有浏览器都可以 除了特殊的网页 不过特殊的网页一般有特殊作用

普通网页不用考虑这些问题

网页对浏览器的兼容是编写浏览器程序的人需要考虑的

编写网页只是要求语法格式正确无错基本上就可以

4、做网页设计,一般如何保证各浏览器显示效果的兼容性?

从兼容性考虑出发那么还是使用jquery包,这样可能兼容性问题都不用考虑了。否则无论js还是css还是会涉及到浏览器兼容问题。

5、制作网页时浏览器的兼容性问题

同浏览器对HTML标记所具有的内外边距属性具有不同的定义。

因此如果想消除这种差距,应该在相应的CSS部分加入以下CSS代码:

*{margin:0px;padding:0px;}

借于此,所有标记的内外边距被统一起来。

优先级问题:对于同一标记属性所给定的值,有不同的优先级。其中优先级最高的是内联代码,其实是页内CSS,接下来是浏览器默认设置,最后才是外部CSS所做的限制。

Margin不一致的问题:

当有多张图片需要排在一行时,通常使用“Float:Left”来实现,这样一来,浏览器就存在兼容性问题。导致图片与后面的内容存在margin不一致的问题。对此一种解决方法就是给图片添加“Display:inline”项即可。

DIV居中问题:

通常会利用“vertical-align:middle”来实现,这对于搜狗浏览器来说,是正常的,但是对于IE浏览器来说,却并没有效果。对此,一种较好的解决方法是:将文字的行高设置与DIV一样时即可解决问题。

内外边框合并问题。通常情况下,对于两个相关DIV块,相邻时采用外边距合并原则,其结果只最两个DIV块中Margin最大值做为两个DIV之间的间距。包含的两个DIV之间的间距也遵行同样的规则。

掌握了这一规则,在利用DIV块进行布局时就可以做的更加得心应手。

6、写html语言,制作网页,怎么让网页和很多浏览器都兼容? 求解!

!! 而且做网页设计 一定要用 IE 和 火狐 等浏览器测试! 发现兼容问题才能及时发现解决!!! 具体的兼容问题解决方法 有很多种,没法给你一一列出来! 只能说根据出现的具体情况 来具体找应对方法,靠自己慢慢积累经验,自己发现问题 ,然后寻找解决的办法,时间久了 你自然就会都明白的!!!不过要说出现的兼容问题越多,越是说明你写的代码不够标准,应该尽量避免兼容问题的出现,把兼容问题出现的几率降到最低,主要还是要提高自身技术水平!!!光靠兼容代码是不能完全解决问题的,毕竟过多的使用兼容代码会让样式表看上去很乱,对今后的修改维护工作造成很多麻烦!!!追问:多看看 XHTML标准 的相关文章,注意代码的书写规范,还有要养成写注释的习惯,这样出现问题的时候找到问题也很方便! w3c网上有

7、网页设计中如何解决浏览器兼容问题

为了能让网站设计正常的运行于各种浏览器平台,网站设计师们不得不想尽办法处理好网站建设中的浏览器兼容问题。正是因为网站设计当中的这一需要产生了一项新技术— CSS Hack。 CSS Hack 就是针对不同浏览器写出不同的 CSS code 的过程,主要用来解决目前各类浏览器无法标准解析CSS样式,导致同一网站设计页面在不同浏览器下出现显示效果不一致的兼容问题。 针对不同浏览器,可以将CSS Hack 网站设计代码整理如下:
1、针对I E 系列浏览器的网站设计代码 针对 IE 6 的专属 CSS Hack 网站设计代码 #id{ _display: block; } 也就是在网站设计CSS属性前加一个小划线就好。 针对 IE 7 的专属 CSS Hack 网站设计代码 #id{ *display: block; } 即在网站设计CSS属性前加上一个星号即可 针对 IE 8 的专属 CSS Hack 网站设计代码 #id{ margin-top: 10px 9; /*IE8*/ } 如上所示,解决办法为在网站设计CSS属性后分号前加上空格与斜线并加入一个数字9即可 。
2、针对火狐的CSS Hack 网站设计代码 火狐可谓是最标准的浏览器之一了,网站设计技术只要稍稍不到位就能体现得淋漓尽致,所以不少网站设计师也很头痛,其实想要解决火狐的兼容性除了要把网站设计的基础知识扎牢之外只要将CSS代码写入到下图 @-moz-document url-prefix(){ } 里面就行了 @-moz-document url-prefix() { #id{ display: block; } } 。
3、针对 Safari 的CSS Hack 网站设计代码 Safari是苹果计算机的最新作业系统Mac OS X中新的浏览器,用来取代之前的Internet Explorer for Mac,使用了KDE的KHTML作为浏览器的运算核心。 @media screen and (-webkit-min-device-pixel-ratio:0) { #id { display: block; } } 兼容性做法和火狐相近。
4、针对 Opera 的CSS Hack 网站设计代码 Opera即Opera Software ASA,是台式机、各种设备和移动网络浏览器市场的商业领袖,因快速、小巧和比其他浏览器更佳的标准兼容性获得了国际上的最终用户和业界媒体的承认,并在网上受到很多人的推崇。 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body #id { display: block; } } 这个世界上必然不会存在绝对完美的事物,因此运用以上方法让我们的网站设计更好的与各种浏览器兼容的时候其实已经违反了网站制作的W3C标准。

与网页设计时怎样兼容各浏览器相关的知识