[ 总结]浏览器兼容手册

2009/11/23 09:42  |  分类：Css

浏览器兼容手册
1. 居中问题
div里的内容，IE默认为居中，而FF默认为左对齐
可以尝试增加代码margin:auto
2. 高度问题
两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间
所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是 height:100%;
但当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，对应CSS是：
.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}
3. clear:both;
不想受到float浮动的，就在div中写入clear:both;
4. IE浮动 margin 产生的双倍距离
#box {
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}
全文阅读 »

标签：、、、、、 222 views  |  发表评论

强制Firefox显示滚动条

2009/11/19 13:32  |  分类：Css

我们知道，在页面高度不够时候，FF火狐浏览器是默认没有滚动条的。但是当页面在加载完了之后，如果页面够长，会出现稍微的闪动（偏移）。这里我们强制FF在开始的时候就有滚动条，这样，就不会出现那样的现象了。

其实，实现过程也不是很复杂，具体看例子：

< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>强制Firefox显示滚动</title>
<style type=”text/css”>
<!–
html {overflow:-moz-scrollbars-vertical;} /*方法一*/
html {min-height:101%;} /*方法二*/
–>
</style>
</head>
<body>
<p>强制Firefox显示滚动条：</p>
<p>方法一：html {overflow:-moz-scrollbars-vertical;}</p>
<p>方法二：html {min-height:101%;}</p>
<p>为什么要强制显示滚动条？因为在Firefox你会发现页面在没有加载完全的时候是没有滚动条的，当加载完成后滚动条才显示出来，所以会感觉页面偏移了下。</p>
</body>
</html>

标签：、 265 views  |  发表评论

img图片下多余空白Bug

2009/09/02 00:10  |  分类：Css

在进行页面的DIV+CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。

设置父对象的文字大小为0px
即，在#sub中添加一行：“font-size:0;”可以解决问题。但这也引发了新的问题，在父对象中的文字都无法显示。就算文字部分被子对象括起来，设置子对象文字大小依然可以显示，但在CSS效验的时候会提示文字过小的错误。

改变父对象的属性
如果父对象的宽、高固定，图片大小随父对象而定，那么可以设置“overflow:hidden;”来解决。如本例中可以向#sub中添加以下代码：“width:88px;height:31px;overflow:hidden;”。
全文阅读 »

标签：、、、、 214 views  |  发表评论

Firefox和IE的技巧集合 (下)

2009/06/25 15:36  |  分类：Css

21. 游标手指cursor

cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

22.UL的padding与margin

ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题

23. FORM标签

这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,所以后面就不会为这个头疼了.

全文阅读 »

标签：、、、 196 views  |  发表评论

Firefox和IE的技巧集合 (中)

2009/06/24 13:01  |  分类：Css

11.如何对齐文本与文本输入框

加上 vertical-align:middle;
＜style type=”text/css”>
＜!–
input {
width:200px;
height:30px;
border:1px solid red;
vertical-align:middle;
}
–>
＜/style>

12.web标准中定义id与class有什么区别吗

一.web标准中是不容许重复ID的,比如 div id=”aa” 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.

二.属性的优先级问题
ID 的优先级要高于class,看上面的例子

三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.

全文阅读 »

标签：、、、 286 views  |  发表评论

Firefox和IE的技巧集合 (上)

2009/06/23 22:36  |  分类：Css

1.div的垂直居中问题

vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

2. margin加倍的问题

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;
例如：
＜#div id=”imfloat”>
相应的css为
#imfloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/}

3.浮动ie产生的双倍距离

#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;

全文阅读 »

标签：、、 207 views  |  发表评论

兼容火狐的超出文字加省略号

2008/12/04 22:15  |  分类：Css

有时候很忙，不知道忙什么，可能就是大家说的瞎忙。
前段时间都在每篇日志前加一副表示心境的图片，后来由于各种原因，还是没坚持，有时候觉得没必要。

开始就啰嗦了这么多没用的，可能你都急了，快放代码啊！[Rhug]
嗯，也是，我也是百度谷歌雅虎的时候懒得看那些啰啰嗦嗦的说教，直接放出代码，在实践里总结学习，这样总比理论来的好很多！有啰嗦了[Belial]

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


青蛙扑满的个人池塘-网站开发者的乐园


千万的变化，不要直接复制到你的页面里，大概看看修改一下！别太懒了。。。

今天无意中在以前的收藏里看到另一个办法，MS比上面这个要好一些！也发上来吧
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



标签：、、、 346 views  |  发表评论

【firefox插件】Web Developer 1.1.6(最新版本，中文版)

2008/11/23 23:29  |  分类：Tools

仅次于Firebug的网页开发设计者工具。功能众多而且强劲。看着这令人眼花缭乱的插件设置窗口，就能一窥它的强大。推荐网页开发者和网页设计者使用，能够帮助你方便的对页面进行调整和完善;
Web 开发者扩展添加一个工具菜单项和一个工具栏到浏览器以提供各种各样的 Web 开发工具。这是一个对 web 开发人员非常有用的扩展，它可以高效的查看一个网页所包含的所有元素甚至更多，例如：
检查页面包含的所有 css 设定；
检查页面的所有 javascript；
调用 dom inspector 查看dom对象；
对改页面添加用户自定义的 css 文件（这样你可以一次用自己不同版本或主题的 css 文件来检查不同的 layout 情况，而完全不需要在多个页面版本之间切换）；
过滤图片，可以设定隐藏图片，标注没有 alt 标签或者没有 title 标签的图片，以确定你的页面是否更加符合 WAI 的要求；
Resize 网页浏览区域大小，以便于确定在不同分辨率情况下的页面 layout 情况；
可以调用几乎所有的标准化校验器, 包括 css, html, wai, link 等校验器，这样能够非常高效的进行标准化校验而不需要在几个不同的校验器之间烦人的切来切去；
多种概要（outline）功能，比如 outline 区块，outline 不推荐使用的标签，outline 标记表格等等；
仪表板信息显示功能，可以方便的定位在左边, 右边或底部来显示各种信息;　　
还有标尺、十字引导线、页面放大镜、显示隐藏元素等等 …..。
你只要逐个使用菜单或工具栏每一个主要功能按钮，都会让你有不少的惊喜。把这么多有用的特性集成在一起，可以大大提高开发的效率，而且让你对你的页面会有一个更全面地特性概览。

Web Developer 1.1.6下载：https://addons.mozilla.org/zh-CN/firefox/addon/60

如果你和我一样是个E文盲，那么点这里下载Web Developer 1.1.6中文版：http://www.rayfile.com/files/65b90f87-4c1e-11dd-94c6-00142218fc6e/

Web Developer 1.1.6中文版说明：
因为下午要用，然后现在用了Firefox 3.0 旧的1.1.4的版本用不上，去找了一下，有1.1.6但官网上现在只有英文版的，我就用1.1.4的资源文件拉进去替换掉，试用还OK，发给大家共享一下，

标签：、、、 188 views  |  发表评论

多款浏览器性能全测试 Opera最快 FireFox最省

2008/11/12 22:24  |  分类：Xhtml

Lifehacker又对各浏览器进行了一次对比评测，本次测试加入了新面孔FireFox 3.1，Internet Explorer 8 beta2，Chrome，Opera 9.6 beta，Safari几乎都是最新的产品。到底谁的兼容性更好，谁的执行效率更高。

　　此测试共进行三轮，其中“8页面负载”测试可能是最容易被影响的变数，一些网页的内容变化相当快，例如视频和图片内容都可能影响到加载时间，除此之外，进行的测试内容包括Sean Patrick Kane的JavaScript测试，页面载入时间，Vista任务管理器中的内存使用率等等。

　　结果显示，Opera是启动速度，读取速度均为最快的双料王，而FireFox在无扩展的前提下可以做到最省资源

　　测试1：页面载入测试，冠军Opera 9.5

　　Opera 9.6 beta版的速度和正式版一样好。其中Cold Start代表第一次启动，而Warm Start则代表第二次或多次启动后的结果。

[align=center]
冷启动浏览器速度测试[/align]

　　下一项测试则是关于多标签页加载速度，现在的浏览器普遍具有标签页功能。这代表的是在同一浏览器中打开一组页面所需时间。

[align=center]
多标签速度测试[/align]

　　测试2：JavaScript和CSS测试 赢家Safari浏览器

　　其中Safari浏览器的CSS和JavaScript性能表现很难被撼动。大多数浏览器包括都不是很擅长JavaScript，在CSS测试中，仅有Chrome能和Safari展开竞争。

[align=center]
CSS处理速度测试[/align]

[align=center]
JS速度测试[/align]

　测试3：内存使用量 赢家Firefox浏览器

　　值得宽慰的是，Mozilla基金会的Firefox 3把主要精力放在了内存节约上。无论Firefox 3 RC3还是Firefox 3.1b，内存使用量均不高。即便打开8个标签页的情况也是如此。喜欢标签页浏览方式的用户，推荐使用Firefox。

[align=center]
资源占用测试[/align]

做为一个网站开发者，这五大浏览器都是必须要熟悉的。这方面的知识还需要进一步了解，这些远远还是不够。还有更另很多朋友头疼的兼容问题，每一个浏览器都有自己的特性。所以希望在不久的将来，我们只使用一个浏览器就可以解决全部问题！

标签：、、、 231 views  |  发表评论

css+js定义input_file元素的样式兼容FireFox

2008/10/14 09:55  |  分类：Javascript

定义input_file元素的样式兼容FF

先前有一种方法（模拟click）可以做到这种效果，不能兼容FF，貌似也不能提交元素的value值.

后来看了网易邮箱的附件上传，觉得定义input_file元素的样式应该是能实现的

css让input_file本身透明，在浏览按钮的位置做个按钮效果，用js传递input_file元素的value值到一个文本框

这里给出演示：
[html]< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">














[/html]

标签：、、、、 303 views  |  发表评论
Pages: 1 2 Next


©2008 容我织梦 All Rights Reservied

Powered by WordPress. Theme by Prower

京ICP备09041474号  迅雷统计