IE与Firefox下对CSS解析的区别

1、对高度的解析
IE:将根据内容的高度变化,包括未定义高度的图片内容,即使定义了高度,当内容超过高度时,将使用实际高度。

Firefox:没有定义高度时,如果内容中包括了图片内容,MF的高度解析是根据印刷标准,这样就会造成和实际内容高度不符合的情况;当定义了高度,但是内容超过高度时,内容会超出定义的高度,但是区域使用的样式不会变化,造成样式错位。

结论:大家在可以确定内容高度的情况下最好定义高度,如果真的没有办法定义高度,最好不用使用边框样式,否则样式肯定会出现混乱!

img对象alt和title的解析
alt:当照片不存在或者load错误时的提示;
title:照片的tip说明。
在IE中如果没有定义title,alt也可以作为img的tip使用,但是在MF中,两者完全按照标准中的定义使用

结论:大家在定义img对象时,最后将alt和title对象都写全,保证在各种浏览器中都能正常使用

其他的细节差别
当你在写css的时候,特别是用float: left(或right)排列一窜图片时,会发现在firefox里面正常而IE里面有问题。无论你用margin:0,还是border: 0来约束,都无济于事。

其实这里还有另外一个问题,就是IE对于空格的处理,firefox是忽略的而IE对于块与块之间的空格是处理的。也就是说一个div结束后要紧接着一个div写,中间不要有回车或者空格。不然也许会有问题,比如3px的偏差,而且这个原因很难发现。

非常不走运的是我又碰到了这样的问题,多个img标签连着,然后定义的float: left,希望这些图片可以连起来。但是结果在firefox里面正常而IE里面显示的每个img都相隔了3px。我把标签之间的空格都删除都没有作用。

后来的解决方法是在img外面套li,并且对li定义margin: 0,这样就解决了IE和firefox的显示偏差。IE对于一些模型的解释会产生很多错误问题,只有多多尝试才能发现原因。

2、嵌套DIV:父DIV的高度不能根据子DIV自动变化的解决方案

当Content内容多时,即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展。 解决方案

在层的最下方产生一个高度为1的空格,可解除这个问题

3、CSS DIV 学习笔记

一、基本上每个区块的div 都要有自己的id,杜绝不同功能的区块用同一个id/class

二、每个稍大的区块div 后面都跟一个标记开始、结束

三、隐藏文字的又一种方法 TEXT-INDENT: -9999px; LINE-HEIGHT: 0

四、巧妙地处理并列的两列:
1)
右列为P, width=44.5%, float=left
左列为P.first, border-right: #a7a7a7 1px solid, width=45%
2)
右列#right, margin-left:50%
左列#left, float=left,width=50% border-right:#a7a7a7 1px solid

以上两种方法关键点在于选择其中一个为float=left

五、随机的切换图片:
#random {
BACKGROUND: url(/rotate.php);
}
这个方法很巧妙。

4、关于div的高度自适应

 
 今天小尿让我帮他的页子解决一个问题,就是div的高度自适应,也就是在一个父级div中嵌套一左一右两个子div,右边的子div内容可无限扩展,而
可以使得父级div的高度能被无限拉长,用一般的布局方法,在IE中可以正确浏览,在Mozilla中父级div的高度就固定在10px左右,无法自适应
高度,height:auto也不行,怎么办呢。网上参考到一篇资料,要实现自适应高度,div层必须具有float属性,于是我开始动手试验,
float:left的话,div就跑到页面最左边去了,这好办,我在它的外面再套一层div,把位置定好,那么里面的就算float:left也不会被
移动位置了。

xhtml:
===============

test
test
test
  • 预安装检查
  • 阅读 PFC 授权协议
  • 初始化数据库
  • 完成安装

CSS
=================
#container_father {
margin-left: auto;
margin-right: auto;
padding: 0px;
width: 750px;
}

#container {
width: 750px;
border: 1px solid #cccccc;
padding: 8px;
margin: 0px;
background-color: #F1F3F5;
float: left;
}

FRom: http://ulean.zg163.net/

5、 深入标准 ~ The IE Doubled Float-Margin Bug(IE双倍浮动边界Bug)
什么发生故障?

一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box),并在浮动元素上使用了左边界(margin-left)来令它和容器的左边产生一段距离。看起来相当的简单,对吗?但直至它被在IE/Win中浏览为止,在浏览器中居左浮动元素的边界长度被神秘地翻了一倍!

情况应该如何?

下面的图释展示了一个简单的div(茶色的盒子)包含着一个居左浮动的div(绿色的盒子)。浮动元素有一个100px的左边界,使容器盒与它的左边缘之间产生了一个100px的间隙。到现在为止,一直都还不错。

.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*This last value applies the 100px left margin */
}

陈旧的IE“双倍占据”

原样的相同代码被在IE/Win中浏览时以些微不同的方式显示,下面的图释展示了IE/Win在布局上所做的。

这为什么会发生?别问这种傻问题!这就是IE,记得吗?符合标准只是理想的状况,不指望实现,这个简单的事实正验证了。

重点

这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间,在这之后的任意有着相似边界的浮动元素不会呈现双倍边界。只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样,双倍边界同样神秘地显示在居右的相同方式。

最后,修复办法!

直到现在(04年1月)这个Bug一直被认为是无法修复的,通常用来替代错误的边界的控制方法如:一个不可视浮动元素的左边距,连同一个内嵌的盒子一起,可
视的盒子装在不可视浮动元素里;或者使用技巧仅对IE/Win设定边界的1/2值。这办法生效了,但是是混乱的而且搞糟了干净的源代码。不过现在全部结束
了。

Steve Clason发现了一个修复办法,描述在他的Guest Demo里,修复了双倍边界和围绕文字缩进Bug。这是一个经典的IE的Bug修复办法,使用一个属性来修复影响不相关属性的Bug。

现在如何来做?

研究它,简单地将{display: inline;}设置给浮动元素就是全部所需做的!是的,听起来太简单了,不是吗?不过这是真的,仅仅一个display的”inline”声明已经能够胜任了。

熟悉规则的人知道浮动元素自动设置为”block”元素,而不管他们之前是什么。就如Steve从W3C里指出:

9.5.1 Positioning the float: the ‘float’ property

“This
property specifies whether a box should float to the left, right, or
not at all. It may be set for elements that generate boxes that are not
absolutely positioned. The values of this property have the following
meanings:

left
The element generates a block box that is
floated to the left. Content flows on the right side of the box,
starting at the top (subject to the ‘clear’ property). The ‘display’ is
ignored, unless it has the value ‘none’.

right
Same as ‘left’, but content flows on the left side of the box, starting at the top.

none
The box is not floated. “

这说明浮动元素上的{display:
inline;}会被忽略,事实上所有的浏览器没有呈现任何改变,包括IE。但是,它不知何故让IE停止将浮动元素的边界翻倍。因而,这个修复办法可以被
直接应用,而没有任何繁琐的隐藏方法。如果将来的一款浏览器决定对这个修复办法抱恙,只要把这个修复装入IE独用的Tan Hack里,细节如同IE
Three Pixel Text-Jog Demo。

下面是两个使用了前面相同代码的生动演示,第一个照常显示了IE的Bug,下一个对浮动元素使用了”inline”修复。
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}

Update (20060828):

6、空

  • 解析问题。

    在FF下空

  • 是不被解析的,也就是说,

  • 标签所带的css样式是不被解释的。但是在IE下空
  • 是一样会被解析的。
    例如我定义如下Css:
    #sidebar ul li {
      list-style-type: none;
      list-style-image: none;
      margin-bottom: 15px;
    }

    而我的sidebar使用了一个空的

  • 。那么在FF下不被解析,而在IE下会出现15px的空白。

    doctype后如何获得body.clientHeight

    今天在用一个随滚动条移动的效果代码时,发现有的页面,不动,而JS代码是一样的 。

    上网一搜索才知道,原来是loose.dtd搞的鬼,查到的说明如下:

    在用DW mx 2004 新建网页文件时会自动加入:

    在ie6中很多js脚本执行就会出现问题,一般是在获取clientWidth, clientHeight,offsetWidth, offsetHeight,scrollWidth, scrollHeight,scrollTop, scrollLeft会返回不正确的值。

    因为在加了doctype后,在ie6中这些document.body的属性已经重新分配给了document.documentElement。

    比如:原来document.body.clientHeight,就要改成document.documentElement.scrollTop

    而我的JS代码是好多页面公用的,有的页面有loose.dtd,有的没有。为了自适应,我就改了下代码:

    ((document.documentElement.clientHeight==0)?document.body.clientHeight:document.documentElement.clientHeight)

    用这样的代码就能自适应了。

    有关Session的作用范围

    前段时间在搞一个多用户网店系统,绑定多个域名,用域名判断商店店主。

    期间用到Session,发现用马桶时,同一个浏览器窗口,用类似site1.my.cn ,site2.my.cn这样的同域不同主机名的域名访问站点,发现有时Session竟共用,有时不共用。而在IE里倒还没发现有这样的问题。

    不知道是何原因。

    郁闷中。。。。

    卡巴斯基中国公司推出3台双线升级服务器

    卡巴斯基中国公司推出3台双线升级服务器, 三台服务器均为 电信/网通 的双线服务器, ping 值都在 42ms 左右, 速度相当快!
    以下为新更新地址:
    http://dnl-cn1.kaspersky-labs.com
    http://dnl-cn2.kaspersky-labs.com
    http://dnl-cn3.kaspersky-labs.com
    使用升级站点步骤 (仅适用于6.0个人版用户) :
    1、在 "服务" -〉 "更新" 上点鼠标右键, 选择 "设置" ;
    2、在 "更新设置" 中选择 "自定义" 按钮;
    3、在弹出的对话框中, 选择 "更新服务器" 标签;
    4、点击 "添加" 按钮, 在 "源" 后的方框中加入"http://dnl-cn1.kaspersky-labs.com
    "或 "http://dnl-cd1.kaspersky-labs.com" , 点击 "确定" ;
    5、退回到 "更新服务器" 标签下, 去掉 "卡巴斯基实验室更新服务器" 前面的勾. 如果之前使用了离线升级包的方式进行升级, 也请去掉相应的离线升级包前的勾, 选择确定

    我试了下,速度超快。。。

    中国十大免费电影网站

      第一位:极限影音(http://www.tk4479.com)

      可能是中国免费电影网站的鼻祖。虽然域名有点难记都是,他很好的服务在众多免费电影网站中是颇有口碑的,你可以在这里看到最快最新的免费电影。不过经常需要抢线,有在线人数限制。

      第二位:007免费在线电影(http://www.dy007.com)

      此网站是不错的一个后起之秀,无需注册即可观看电影。库存电影飞速增加,更新很快(基本上每天都能更新30部以上),可以看到最新的免费电影大片。站长还率先开发了在线电影观看客户端软件,界面很清爽,软件下载地址:http://www.dy007.com/software/index.htm

      第三位:新快电影(http://www.xk88.com)

      XK88电影搜索引擎,不错的一个电影搜索网站,有的需要下载不提供在线播放,库存不少。

      第四位:娱如意(http://vod.ruyi.com)

      联通视频,需要配置比较高,否则播放不了,而且需要注册才能观看。

      第五位:世纪前线(http://www.avl.com.cn)

      广州电信开办的综合娱乐网站。提供免费电影很久了,速度不错,但需要注册,而且还要抢线才能观看。注册还可以获得一个不错的视频邮箱!

      第六位:POCO电影(http://movie.poco.cn)

      Poco免费电影,是一个免费电影交流的站点。网站自身提供免费电影下载,还可以通过P2P下载其他人电脑上的电影,不过首先要下载安装他的专用软件。

      第七位:KAN51在线小电影(http://www.kan51.net)

      中国最大的免费在线小电影网站,电影播放速度不错,想休闲在线观看小电影和综艺电影,KAN51是你最好的选择!

      第八位:BTChina联盟(http://www.btchina.net)

      中国最全最大的免费BT电影下载网站,电影连接种子很多,下载很快。免费BT电影下载首选推荐网站。

      第九位:电骡·中国(http://www.emule.org.cn)

      电骡是外国人开发一个P2P软件,连接不同的服务器可以有不同的电影下载文件,任何人都可以永久免费安装使用。而且可以下载到很多国内下载不到的电影,嘿嘿!

      第十位:超级VOD(http://www.powervod.com)

      比较不错的在线电影网站,需要注册观看,注册后会发送密码到你邮箱里。速度还不错.(来源:《世界数据报告》)

    embed参数[播放器]

    embed参数
    描述: 在页面中嵌入任何类型的文档.用户的机器上必须已经安装了能够正确显示文档内容的程序,一般常用于在网页中插入多媒体格式可以是.rm .mid .wav等,Netscape 及 新版的 IE 都支持。

    语法:

    相关参数描述:

    SRC:设定关联的文档,可以是相对路径或绝对路径。例:src="xt.rm"
    autostart 是否在音乐档下载完之后就自动播放。"true" 是,"false" 否
    loop 是否自动反复播放。LOOP=2 表示重复两次,true 是, false 否。
    ALIGN 设定控制画面和旁边文字的对齐方式,其值可以是 top、bottom、center、baseline、 left、

    right、texttop、middle、absmiddle、absbottom 。

    ALT 程序不能正确运行时用来替代显示的文字.

    CONTROLS
    设定控制面板的外观。预设值是 console。
    console 一般正常面板
    controlpanel 精简面板 
    smallconsole 更小的面板   
    playbutton 只显示播放按钮   
    pausecutton 只显示暂停按钮   
    stopbutton 只显示停止按钮   
    volumelever 只显示音量调节按钮
    imagewindow 只显示播放器屏幕
    statusbar 只显示相关信息 例如 传速 播放时间
    CLASS:给该标记指定一个事先定义好的样式类。
    CODE:class文件名,嵌入的是一个Java Applet.
    CODEBASE:指定包含文档的目录的路径.
    HIDDEN:是否完全隐藏控制画面,true 为是,no 为否
    HEIGHT:显示该文档的区域的高度.
    HSPACE:显示该文档时的水平间距.
    ID:给该元素定义一个在文档中唯一的标识。有效标识以字母开头,可以在中间使用下划线。
    NAME:指定程序的名称.
    STYLE:指定该元素的样式。
    title:定义提示信息,提示信息文字在响应onmouseover事件时显示出来。
    UNITS:指定高宽值的单位,可以是像素(px)或ems (em).
    VSPACE:显示该文档时的垂直间距.
    WIDTH:显示该文档的区域的宽度.

    播放器js控制MediaPlayer

    控制MediaPlayer播放器的例子:
    [html]

    播放控制:
    音乐切换:




    播放控制:




    声道控制:





    进度控制:






    音量控制:









    速度控制:

    0.2){mp.Rate-=0.1}" value="减速">



    界面控制:
    字幕控制:




    音量控制:




    播放控制:




    媒体信息:




    GotoBar :




    状 态 栏:




    跟 踪 条:




    位置控制:




    窗口缩放:




    [/html]

    RealPlayer网页播放器参数

    参数:autostart 属性:True或是False 作用:指定是否自动播放指定的源文件
    参数:backgroundcolor 属性:任何用符号“#”开头的16进制数值或是任何预定义的颜色作用:指定图像窗口的背景颜色
    参数:center 属性:True或是False 作用:指定片断使用初始编码大小播放,并且在图像窗口的中央。
    参数:classid 属性:"clsid:CFCDAA03-8BE4-1lcf-B84B0020AFBBCCFA:** 作用:用于指定ActiveX控件的唯一的字符串标示,可以认出嵌入的RealPalyer播放器。
    参数:console 属性:任何字符串作用:可以将各种不同的RealPlayer控制聚集在网页上,这样它们可以交互使用或是保持独立,而且互相不影响
    参数:controls 属性:ImageWindow,All,ControlPanel,PlavButton,PlayOnlyButton, PauseButton,StopButton,FFCtrl,RWCtrl,MuteCtrl,MuteVolume,VolumeSlider,PositionSlider,TACCtrl,HomeCtrl,InfoVolumePanel,InfoPanel,StatusBar,StatusField,PositionField 作用:可以让你指定那些控制是可见的。
    参数:height 属性:任何整数值作用:指定RealPlayer元素的高度,单位:像
    参数:id 属性:任何字符串作用:为标签中的RealPlayer元素指定名字。
    参数:imagestatus 属性:True或是False 作用:指定是否在图像窗口中显示状态信息,默认值是true
    参数:loop 属性:True或是False 作用:可以让你指定片断是否无限循环
    参数:maintainaspect 属性:True或是False 作用:默认RealPlayer拉伸所有的片断来充满整个图像窗口。
    参数:name 属性:任何字符串作用:为标签中的RealPlayer元素指定名字(在标签中使用id)
    参数:nojava 属性:True或是False 作用:避免启动Java虚拟机
    参数:nolabels 属性:True或是False 作用:可以禁止显示标题或是版权信息(realplayer5.0以上时,它是垃圾…)
    参数:nologo 属性:True或是False 作用:避免RealPlayer启动时在图像窗口中显示
    参数:numloop 属性:任何整数值作用:让你能够指定文件片循环的次数,不需要参数loop
    参数:prefetch 属性:True或是False 作用:指定在播放前,RealPlayer是否可以获得流描述信息,默认值是False
    参数:region 属性:任何字符串作用:同SMIL一起使用。允许你指定使用HTML代替SMIL
    参数:scriptcallbacks 属性:用逗号分割的列表作用:指定浏览器的回调监控(好高级的东东!)
    参数:shuffle 属性:True或是False 作用:同多文件片的ram文件或是SMIL文件一起使用。可以让RealPlayer随机播放列表中的文件
    参数:src 属性:任何合法的相对或是完整的URL 作用:指定播放的文件或是源文件的地址
    参数:type 属性:字符串作用:为嵌入插件指定MIME类型
    参数:width 属性:任何整数值作用:指定RealPlayer元素的宽度

    RealPlayer的一些函数、方法和过程

    这是 Real Player ActiveX Control Library (Version 1.0) 的所有函数与方法,有兴趣可以研究一下。

    function GetSource: WideString;
    procedure SetSource(const lpszNewValue: WideString);
    function GetConsole: WideString;
    procedure SetConsole(const lpszNewValue: WideString);
    function GetControls: WideString;
    procedure SetControls(const lpszNewValue: WideString);
    function GetNoLabels: WordBool;
    procedure SetNoLabels(bNewValue: WordBool);
    function GetAutoStart: WordBool;
    procedure SetAutoStart(bNewValue: WordBool);
    function GetAutoGotoURL: WordBool;
    procedure SetAutoGotoURL(bNewValue: WordBool);
    function GetVolume: Smallint;
    procedure SetVolume(nVol: Smallint);
    function GetMute: WordBool;
    procedure SetMute(bMute: WordBool);
    function GetLoop: WordBool;
    procedure SetLoop(bVal: WordBool);
    function GetImageStatus: WordBool;
    procedure SetImageStatus(bEnable: WordBool);
    function GetPacketsTotal: Integer;
    function GetPacketsReceived: Integer;
    function GetPacketsOutOfOrder: Integer;
    function GetPacketsMissing: Integer;
    function GetPacketsEarly: Integer;
    function GetPacketsLate: Integer;
    function GetBandwidthAverage: Integer;
    function GetBandwidthCurrent: Integer;
    procedure DoPlayPause;
    procedure DoStop;
    procedure DoNextItem;
    procedure DoPrevItem;
    function CanPlayPause: WordBool;
    function CanStop: WordBool;
    function HasNextItem: WordBool;
    function HasPrevItem: WordBool;
    function HasNextEntry: WordBool;
    function HasPrevEntry: WordBool;
    procedure DoNextEntry;
    procedure DoPrevEntry;
    procedure AboutBox;
    procedure EditPreferences;
    procedure HideShowStatistics;
    function IsStatisticsVisible: WordBool;
    procedure DoGotoURL(const url: WideString; const target: WideString);
    procedure DoPlay;
    procedure DoPause;
    function GetPosition: Integer;
    function GetPlayState: Integer;
    function GetLength: Integer;
    function GetTitle: WideString;
    function GetAuthor: WideString;
    function GetCopyright: WideString;
    function GetClipWidth: Integer;
    function GetClipHeight: Integer;
    function CanPlay: WordBool;
    function CanPause: WordBool;
    procedure SetPosition(lPosition: Integer);
    function GetNumLoop: Integer;
    procedure SetNumLoop(lVal: Integer);
    function GetCenter: WordBool;
    procedure SetCenter(bVal: WordBool);
    function GetNoLogo: WordBool;
    procedure SetNoLogo(bVal: WordBool);
    function GetMaintainAspect: WordBool;
    procedure SetMaintainAspect(bVal: WordBool);
    function GetBackgroundColor: WideString;
    procedure SetBackgroundColor(const pVal: WideString);
    function GetStereoState: WordBool;
    function GetLiveState: WordBool;
    function GetShowStatistics: WordBool;
    procedure SetShowStatistics(bVal: WordBool);
    function GetShowPreferences: WordBool;
    procedure SetShowPreferences(bVal: WordBool);
    function GetShowAbout: WordBool;
    procedure SetShowAbout(bVal: WordBool);
    function GetOriginalSize: WordBool;
    procedure SetOriginalSize;
    function GetDoubleSize: WordBool;
    procedure SetDoubleSize;
    function GetFullScreen: WordBool;
    procedure SetFullScreen;
    function GetEnableContextMenu: WordBool;
    procedure SetEnableContextMenu(bVal: WordBool);
    function GetEnableOriginalSize: WordBool;
    procedure SetEnableOriginalSize(bVal: WordBool);
    function GetEnableDoubleSize: WordBool;
    procedure SetEnableDoubleSize(bVal: WordBool);
    function GetEnableFullScreen: WordBool;
    procedure SetEnableFullScreen(bVal: WordBool);
    function GetEnableMessageBox: WordBool;
    procedure SetEnableMessageBox(bVal: WordBool);
    procedure SetTitle(const pVal: WideString);
    procedure SetAuthor(const pVal: WideString);
    procedure SetCopyright(const pVal: WideString);
    function GetWantKeyboardEvents: WordBool;
    procedure SetWantKeyboardEvents(bWantsEvents: WordBool);
    function GetWantMouseEvents: WordBool;
    procedure SetWantMouseEvents(bWantsEvents: WordBool);
    function GetNumEntries: Smallint;
    function GetCurrentEntry: Smallint;
    function GetEntryTitle(uEntryIndex: Smallint): WideString;
    function GetEntryAuthor(uEntryIndex: Smallint): WideString;
    function GetEntryCopyright(uEntryIndex: Smallint): WideString;
    function GetEntryAbstract(uEntryIndex: Smallint): WideString;
    procedure SetCanSeek(bCanSeek: WordBool);
    function GetCanSeek: WordBool;
    function GetBufferingTimeElapsed: Integer;
    function GetBufferingTimeRemaining: Integer;
    function GetConnectionBandwidth: Integer;
    function GetPreferedLanguageString: WideString;
    function GetPreferedLanguageID: Integer;
    function GetUserCountryID: Integer;
    function GetNumSources: Smallint;
    function GetSourceTransport(nSourceNum: Smallint): WideString;
    function GetWantErrors: WordBool;
    procedure SetWantErrors(bVal: WordBool);
    function GetShuffle: WordBool;
    procedure SetShuffle(bVal: WordBool);
    function GetVersionInfo: WideString;
    function GetLastMessage: WideString;
    function GetLastErrorSeverity: Integer;
    function GetLastErrorRMACode: Integer;
    function GetLastErrorUserCode: Integer;
    function GetLastErrorUserString: WideString;
    function GetLastErrorMoreInfoURL: WideString;
    procedure SetPreFetch(bVal: WordBool);
    function GetPreFetch: WordBool;
    procedure SetRegion(const pVal: WideString);
    function GetRegion: WideString;
    function GetIsPlus: WordBool;
    function GetConsoleEvents: WordBool;
    procedure SetConsoleEvents(bVal: WordBool);
    function GetDRMInfo(const pVal: WideString): WideString;
    property ControlInterface: IRealAudio read GetControlInterface;
    property DefaultInterface: IRealAudio read GetControlInterface;