天天看点

IE和Firefox兼容性:DIV空白-网页居中

又碰到了几个浏览器兼容性问题,这里主要就是说IE和Firefox的差异了;

1. 今天碰到的第一个问题:DIV之间的空白,两个连续的DIV之间,IE没有空白,Firefox则在两个div之间有空白。想想应该是常见的原因,即IE和Firefox对高度的解析不同,设置div的CSS:magin:0px; padding:0px; 然后测试,还是没有解决问题。原来第二个div里面是以p标签起始,再将此<p>设置CSS:magin-top:0px; padding-top:0px;   两个div之间的空白消失了。

2. 第二个问题是Firefox网页居中的问题:

IE下使用text-align:center就可以实现所有元素的居中效果,在Body的text-align为center的情况下

我们在Body中插入下面的HTML代码

<div style="background-color:#006699; width:800px;">文字内容</div>

在IE中,通过背景的颜色差异我们可以明显看到这些元素以居中方式表现出来;

然而在Firefox中,Div是以默认方式居左的,文字则是居中也就是说在Firefox中text-align是真正的只是Text控制而已

要想达到div也居中的话,不仅需要给body设置margin:0 auto; text-align:center;  同时还需要给div添加一个margin:auto;

最终效果是

body {margin:0px auto; text-align:center; padding:0px;}

div { margin:auto;}

<div style="background-color:#006699; width:800px;">文字内容</div>

另外我们还可以通过添加<center>来解决Firefox的居中问题。

<center>

<div style="background-color:#006699; width:800px;">文字内容</div>

</center>

3. 第三个问题是Firefox是否支持<marquee>标记问题,这个问题比较复杂,下面详细介绍:

W3C 标准里面没有marquee标签,但marquee行为在某些地方还是很有用的。IE大行其道,Marquee被网页设计者滥用得太多了,致使Firefox、Opera等浏览器也不得不兼顾这个被大多数网站使用的非标准标签。

虽然Firefox、Opera偶尔也能运行marquee,但大多数情况下,如声明 DOCTPYE为Transitional(或更高)的XHTML,Firfox就不支持,IE还不算做得绝,做得最绝的是Opera,它从骨子里就认为没有marquee!所以目前有IE支持marquee了。不过微软为了符合W3C国际标准,IE8也不支持微软自己的定义的标准:marquee。加了Doctype的Firefox对marquee不支持marquee,firefox好像是不支持动态生成的marquee。看具体html和css情况。因此很多网页设计师转向用javascript 或 flash来实现marquee走马灯动画效果,目的就是兼容所有浏览器。

一、为了在FF和Opera上实现类似marquee的行为,先要了解marquee是怎样的一个行为。

    Marquee特有的属性如下:

    BEHAVIOR:设置或获取文本如何在字幕中滚动。

    值:

scroll Default. Marquee scrolls in the direction specified by the direction property. The text scrolls off the end and starts over.

alternate Marquee scroll direction reverses when its content reaches the edge of the container.

slide Marquee scrolls in the direction specified by the direction property. The text scrolls to the end and stops.

DIRECTION:设置或获取文本滚动的方向。

值:

left Default. Marquee scrolls left.

right Marquee scrolls right.

down Marquee scrolls down.

up Marquee scrolls up.

SCROLLAMOUNT:设置或获取介于每个字幕绘制序列之间的文本滚动像素数。

值:一个整数。Integer that specifies or receives the number of pixels.

SCROLLDELAY:设置或获取字幕滚动的速度,以微秒计算。此值越小,动作就细腻,相当于电影的帖数。

TRUESPEED:设置或获取字幕的位置是否使用 scrollDelay 和 scrollAmount 属性计算,已过的实际时间来自于时钟计时。

Boolean值:默认为false,简单的说,此时scrollDelay的值总是高于60微秒,低于60微秒的也会归于60微秒。如果想得到scrollDelay小于60微秒的行为,就必须设置TRUESPEED为true。

false Default. Marquee computes movement based on 60-millisecond ticks of the clock. This means every scrollDelay value under 60 is ignored, and the marquee advances the amount of scrollAmount each 60 milliseconds. For example, if scrollDelay is 6 and scrollAmount is 10, the marquee advances 10 pixels every 60 milliseconds.

true Marquee advances the pixel value of scrollAmount by the number of milliseconds set for scrollDelay. For example, the marquee would advance 10 pixels for every 6 milliseconds if scrollDelay is 6, scrollAmount is 10, and the value of trueSpeed is true.