扩展框问题

放到 标签下，然后为div 指定一个类： 然后CSS 这样设计： #container{ min-width: 600px; width:expression(document.body.clientWidth

垂直居中，Firefox IE6 only

垂直居中，Firefox IE6 only

垂直居中，Firefox IE6 only

IE VS FireFox CSS 兼容要点：DOCTYPE 影响CSS 处理 FF: div 设置margin-left, margin-right 为auto 时已经居中, IE 不行 FF: body 设置text-align 时, div 需要设置margin: auto(主要是margin-left,margin-right) 方 可居中 FF: 设置padding 后, div 会增加height 和width, 但IE 不会, 故需要用!important 多设 一个height 和width FF: 支持!important, IE 则忽略, 可用!important 为FF 特别设置样式 div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV 一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 cursor: pointer 可以同时在IE FF 中显示游标手指状， hand 仅IE 可以 FF: 链接加边框和背景色，需设置display: block, 同时设置float: left 保证不换行。参照 menubar, 给a 和menubar 设置高度是为了避免底边显示错位, 若不设height, 可以在 menubar 中插入一个空格XHTML+CSS 兼容性解决方案小集 使用XHTML+CSS 构架好处不少，但也确实存在一些问题，不论是因为使用不熟练还是思 路不清晰，我就先把一些我遇到的问题写在下面。 1.在mozilla firefox 和IE 中的BOX 模型解释不一致导致相差2px 解决方法： div css xhtml xml Example Source Code Example Source Code [www.52css.com] div{margin:30px!important;margin:28px;} 注意这两个margin 的顺序一定不能写反，据阿捷的说法!important 这个属性IE 不能识别， 但别的浏览器可以识别。所以在IE 下其实解释成这样： div css xhtml xml Example Source Code Example Source Code [www.52css.com] div{maring:30px;margin:28px} 重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important; 2.IE5 和IE6 的BOX 解释不一致IE5 下div{width:300px;margin:0 10px 0 10px;}div 的宽度会 被解释为300px- 10px(右填充)-10px(左填充)最终div 的宽度为280px，而在IE6 和其他浏览 器上宽度则是以300px+10px(右填充)+10px (左填充)=320px 来计算的。这时我们可以做如 下修改： div css xhtml xml Example Source Code Example Source Code [www.52css.com] div{width:300px!important;width /**/:340px;margin:0 10px 0 10px} 关于这个/**/是什么我也不太明白，只知道IE5 和firefox 都支持但IE6 不支持，如果有人理 解的话，请告诉我一声，谢了！：） 3.ul 标签在Mozilla 中默认是有padding 值的,而在IE 中只有margin 有值所以先定义 div css xhtml xml Example Source Code Example Source Code [www.52css.com] ul{margin:0;padding:0;} 就能解决大部分问题 4.关于脚本，在xhtml1.1 中不支持language 属性，只需要把代码改为 div css xhtml xml Example Source Code Example Source Code [www.52css.com] div+css 编辑网页firefox 下错位的解决方法{clear 和float 属性}好不容易编辑好的网页导航， 在FIREFOX 下测试发现错位的厉害，毫无美感可言{原因找出，原来是当时测试的一个代 码，测试完了忘记改了过来，额的个神，用了我一个多小时} 没办法，做为使用比较多的浏览器之一，不能不考虑适应它。出现错位混乱的原因主要是因 为IE 和FIREFOX 的标准不同，某些属性的释义出现相差所致。 没办法只好边学边用了。clear 和float 属性 在css 文件里定义的容器时加入clear 属性来控制页面 clear 属性说明：该属性的值指出了不允许有浮动对象的边。 注意这里要注意和float 属性的区分 float：该属性的值指出了对象是否及如何浮动。 当该属性不等于none 引起对象浮动时，对象将被视作块对象(block-level)，即display 属性等 于block。也就是说，浮动对象的display 特性将被忽略。 clear 属性支持的参数有下面4 个： none : 允许两边都可以有浮动对象 both : 不允许有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 而float 属性支持的参数有下面3 个： none : 对象不浮动 left : 对象浮在左边 right : 对象浮在右边DOCTYPE 影响CSS 处理 FF: div 设置margin-left, margin-right 为auto 时已经居中, IE 不行 FF: body 设置text-align 时, div 需要设置margin: auto(主要是margin-left,margin-right) 方 可居中 FF: 设置padding 后, div 会增加height 和width, 但IE 不会, 故需要用!important 多设 一个height 和width FF: 支持!important, IE 则忽略, 可用!important 为FF 特别设置样式 div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV 一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 cursor: pointer 可以同时在IE FF 中显示游标手指状， hand 仅IE 可以 FF: 链接加边框和背景色，需设置display: block, 同时设置float: left 保证不换行。参照 menubar, 给a 和menubar 设置高度是为了避免底边显示错位, 若不设height, 可以在 menubar 中插入一个空格 XHTML+CSS 兼容性解决方案小集 使用XHTML＋CSS 构架好处不少，但也确实存在一些问题，不论是因为使用不熟练还是思 路不清晰，我就先把一些我遇到的问题写在下面，省的大家四处找^^ 1.在mozilla firefox 和IE 中的BOX 模型解释不一致导致相差2px 解决方法： div{margin:30px!important;margin:28px;}注意这两个margin 的顺序一定不能写反，据阿捷的 说法!important 这个属性IE 不能识别，但别的浏览器可以识别。所以在IE 下其实解释成这 样： div{maring:30px;margin:28px} 重复定义的话按照最后一个来执行， 所以不可以只写 margin:XXpx!important; 2.IE5 和IE6 的BOX 解释不一致IE5 下div{width:300px;margin:0 10px 0 10px;}div 的宽度会 被解释为300px-10px(右填充)-10px(左填充)最终div 的宽度为280px，而在IE6 和其他浏览 器上宽度则是以300px+10px(右填充)+10px(左填充)=320px 来计算的。这时我们可以做如下 修改 div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}，关于这个/**/是什么我也 不太明白，只知道IE5 和firefox 都支持但IE6 不支持，如果有人理解的话，请告诉我一声， 谢了！：） 3.ul 标签在Mozilla 中默认是有padding 值的,而在IE 中只有margin 有值所以先定义 ul{margin:0;padding:0;}就能解决大部分问题 4.关于脚本，在xhtml1.1 中不支持language 属性，只需要把代码改为 1、div+css 如何使网站兼容不同字体 使用utf-8 内码进行编写 (右键-编码-选择一种其它国家的编码-查看效果) asp 代码如下: 使用方法: 2、关于div+css 兼容IE 和firefox 的问题 好不容易建立的div+css 网页完全符合W3C 标准。在ie7 下显示非常完美，用firefox 一测 试，乖乖一探糊涂惨不忍睹。经过一番研究发现兼容很 简单。 1、增加div {overflow: hidden;},目的就是让div 自动适应内容高度 2、横排的div 外套div 另外设定 ul { margin: 0px; padding: 0px; } 是消除li 前面的空格 3、div+css 兼容性问题 CSS 兼容要点：DOCTYPE 影响CSS 处理 FF: div 设置margin-left, margin-right 为auto 时已经居中, IE 不行 FF: body 设置text-align 时, div 需要设置margin: auto(主要是margin-left,margin-right) 方 可居中 FF: 设置padding 后, div 会增加height 和width, 但IE 不会, 故需要用!important 多设 一个height 和width FF: 支持!important, IE 则忽略, 可用!important 为FF 特别设置样式 div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV 一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是 要控制内容不要换行 cursor: pointer 可以同时在IE FF 中显示游标手指状， hand 仅IE 可以 FF: 链接加边框和背景色，需设置display: block, 同时设置float: left 保证不换行。参照 menubar, 给a 和menubar 设置高度是为了 避免底边显示错位, 若不设height, 可以在menubar 中插入一个空格XHTML+CSS 兼容性 解决方案小集 使用XHTML+CSS 构架好处不少，但也确实存在一些问题，不论是因为使用不熟练还是思 路不清晰，我就先把一些我遇到的问题写在下面。 1.在mozilla firefox 和IE 中的BOX 模型解释不一致导致相差2px 解决方法： div css xhtml xml Example Source Code Example Source Code [www.52css.com] div{margin:30px!important;margin:28px;} 注意这两个margin 的顺序一定不能写反，据阿捷的说法!important 这个属性IE 不能识别， 但别的浏览器可以识别。所以在IE 下其实解释成这样 ： div css xhtml xml Example Source Code Example Source Code [www.52css.com] div{maring:30px;margin:28px} 重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important; 2.IE5 和IE6 的BOX 解释不一致IE5 下div{width:300px;margin:0 10px 0 10px;}div 的宽度会 被解释为300px- 10px(右填充)-10px(左填充)最终 div 的宽度为280px，而在IE6 和其他浏览器上宽度则是以300px+10px(右填充)+10px (左填 充)=320px 来计算的。这时我们可以做如下修改： div css xhtml xml Example Source Code Example Source Code [www.52css.com] div{width:300px!important;width /**/:340px;margin:0 10px 0 10px} 关于这个/**/是什么我也不太明白，只知道IE5 和firefox 都支持但IE6 不支持，如果有人理 解的话，请告诉我一声，谢了！：） 3.ul 标签在Mozilla 中默认是有padding 值的,而在IE 中只有margin 有值所以先定义 div css xhtml xml Example Source Code Example Source Code [www.52css.com] ul{margin:0;padding:0;} 就能解决大部分问题 4.关于脚本，在xhtml1.1 中不支持language 属性，只需要把代码改为 div css xhtml xml Example Source Code Example Source Code [www.52css.com] 4、div+css 兼容问题解决方案（IE5/5.5/6/7/FF） 之前找了几个不同版本的可独立运行的IE 浏览器，正好拿来试试页面的兼容性问题。不试 不知道，在IE6 和FF 中没问题的页面在IE5 和IE5.5 中乱 成一团，一直听说IE5 是WEB 标准制作的一个“钉子户”，现在不得不相信了。 既然有问题，那就找找解决的方法咯，在网上一搜，相关的文章还是不少的，觉得最直接的 方法还是“IE 条件注释”，很方便的就能为IE 的不 同版本写样式。但这样就得为每个版本写一个样式，不利于文件的优化。 找了一些相关的CSS HACK 后，觉得应该可以把IE5/IE5.5/IE6/FF 的HACK 写到一起的， 经过测试，终于找到了一个不错的方法，下面我们来看看 怎么实现： 大家都知道用!important 声明可以提升指定样式规则的应用优先权，如下面的例子： E1{ background-color: red !important;/*提升优先权*/ background-color: blue; } 但这样写在IE 中会有个问题，看过我的《关于CSS 样式表优先级》和《关于CSS 样式表优 先级补遗》，你会知道在IE6 和FF 中用! important 声明 可以提高优先级别，但在IE6 中的!important 声明并不是绝对的，它会被之后的同名属性定 义所替换。也就是说在上面的例子中，IE6 所应用的 是最后一个背景色的值，即“blue”；而在FF 中背景色的值为“red”。根据这一点，我们就可 以把FF 和IE 的样式分离开。 OK ，解决了FF 和IE 的问题，现在来解决IE 自己的问题。 看过了嘟嘟的《绕过IE6 支持IE5 的别一种写法-IE 也支持">"》后有感而发，使用“＞”IE 是否真的可以认得？我们来看个例子： E1{ background-color: red; ＞background-color: blue; } 在FF 中得到的是背景色红色，而在IE 中得到的背景色是蓝色，根据样式重定义的规则， 如果浏览器可以识别“＞”，则应该得到的蓝色的背景 ，因此可以知道“＞”只有IE 可以识别，这点是很重要的哦！在后面大家就会知道了。（注： 我测试过其它的一些符号，如“~”、“`”、“ ＜”等，都只有IE 可以识别，在此为了感谢嘟嘟，推荐使用“＞”） 我们再来看个例子： E1{ ＞/*IE only*/background-color: black; ＞/*IE only*/background-color /*IE5.5*/: green; } 这个例子在IE6 中得到了黑色的背景；而在IE5.5 中得到的绿色的背景；在IE5 中也得到了 黑色的背景。这就说明了第二句定义只有IE5.5 能识别 ，这是个很早就公布的HACK，可以在网上找到相关的资料，要注意的就是在属性名之后 是有一个空格的。到此我们已经把FF、IE5.5、IE6 分离 出来了，那IE5 呢？其实现在我们只要把IE5 跟IE6 分开就OK 了，来看看例子： E1{ ＞/*IE only*/background-color: red;/*IE5*/ } E1/*IE5.5+*/{ ＞/*IE only*/background-color: black; } 这里我们又用到一个HACK，就是“E1/**/{}”，这个定义在IE5 以上的版本才能识别出来。 这个例子得到的结果是，在IE5 中的背景色为红色； 在IE5 以上版本中得到的是黑色背景。 终于把不同版本的浏览器都分离出来了，这样我们就可以为不同的浏览器定义不同的样式 了。来看个完整的例子： E1{ width: 500px; height: 50px; background-color: red !important;/*FF*/ background-color: blue;/*IE5*/ text-align:center; } E1/*IE5.5+*/{ ＞/*IE only*/background-color: black;/*IE6*/ ＞/*IE only*/background-color /*IE5.5*/: green; } 需要注意的是，在上面例子中“background-color”定义的顺利不能改变，即FF-IE5-IE6-IE5.5。 对于IE 的定义在属性前要加“＞”，因为 “E1/**/{}”这个HACK 在FF 中可以识别。也许你会想，上面的例子不是可以写成： E1{ width: 500px; height: 50px; background-color: red;/*FF*/ ＞background-color: blue;/*IE5*/ text-align:center; } E1/*IE5.5+*/{ ＞/*IE only*/background-color: black;/*IE6*/ ＞/*IE only*/background-color /*IE5.5*/: green; } 这样不就又可以省下几个字节？是没错，可是HACK 不是标准，如果滥用HACK，那只会 离标准越来越远！ 6、div+css 实现Firefox 和IE6 兼容的垂直居中 Firefox 中使用display: table-cell; vertical-align: middle;可以实现div 垂直居中，而IE6 中则需 要借助IE6 中css 的特点实现垂直居中。为 了实现Firefox 和IE6 兼容的垂直居中，还需要借助于!important 标记。Firefox 支持!important 标记，而IE6 忽略!important 标记，因此可以使 用! important 标记区别Firefox 和IE6。 [示例代码]

垂直居中，Firefox only

垂直居中，Firefox only

垂直居中，Firefox only