“djkelvin”通过精心收集，向本站投稿了5篇浏览器 cookie 限制网页设计，以下文章小编为您整理后的浏览器 cookie 限制网页设计，供大家阅读。

篇1：浏览器 cookie 限制网页设计

一、浏览器允许每个域名所包含的 cookie 数：

Microsoft 指出 Internet Explorer 8 增加 cookie 限制为每个域名 50 个，但 IE7 似乎也允许每个域名 50 个 cookie（《Update to Internet Explorer’s Cookie Jar》），

Firefox 每个域名 cookie 限制为 50 个。

Opera 每个域名 cookie 限制为 30 个。

Safari/WebKit 貌似没有 cookie 限制。但是如果 cookie 很多，则会使 header 大小超过服务器的处理的限制，会导致错误发生。

注：“每个域名 cookie 限制为 20 个”将不再正确！

二、当很多的 cookie 被设置，浏览器如何去响应。除 Safari（可以设置全部cookie，不管数量多少），有两个方法：

最少最近使用（least recently used (LRU)）的方法：当 Cookie 已达到限额，自动踢除最老的 Cookie ，以使给最新的 Cookie 一些空间，

Internet Explorer 和 Opera 使用此方法。

Firefox 很独特：虽然最后的设置的 Cookie 始终保留，但似乎随机决定哪些 cookie 被保留。似乎没有任何计划（建议：在 Firefox 中不要超过 Cookie 限制）。

三、不同浏览器间 cookie 总大小也不同：

Firefox 和 Safari 允许 cookie 多达 4097 个字节, 包括名（name）、值（value）和等号。

Opera 允许 cookie 多达 4096 个字节, 包括：名（name）、值（value）和等号。

Internet Explorer 允许 cookie 多达 4095 个字节, 包括：名（name）、值（value）和等号。

注：多字节字符计算为两个字节。在所有浏览器中，任何 cookie 大小超过限制都被忽略，且永远不会被设置。

节选自：《Browser cookie restrictions》

篇2：浏览器兼容手册网页设计

这是我总结多年的一个小文档，最近看见有人咨询浏览器兼容的问题，就贡献出来，

并不一定全，有的也可能不准确，比如新出的IE8、Chrome等都没有太多涉及，虽然最近做的一些项目也兼容了IE8、Chrome等，但都没来的及总结进去，后来就忘了...汗。大家一起慢慢完善吧。

javascript部分

1. document.form.item 问题

问题：

代码中存在 document.formName.item(“itemName”) 这样的语句，不能在FF下运行

解决方法：

改用 document.formName.elements[“elementName”]

2. 集合类对象问题

问题：

代码中许多集合类对象取用时使用，IE能接受，FF不能

解决方法：

改用 [] 作为下标运算，例：

document.getElementsByName(“inputName”)(1) 改为 document.getElementsByName(“inputName”)[1]

3. window.event

问题：

使用 window.event 无法在FF上运行

解决方法：

FF的 event 只能在事件发生的现场使用，此问题暂无法解决。可以把 event 传到函数里变通解决：

nMouseMove = “functionName(event)”

function functionName (e) {

e = e || window.event;

......

}

4. HTML对象的 id 作为对象名的问题

问题：

在IE中，HTML对象的 ID 可以作为 document 的下属对象变量名直接使用，在FF中不能

解决方法：

使用对象变量时全部用标准的 getElementById(“idName”)

5. 用 idName 字符串取得对象的问题

问题：

在IE中，利用 eval(“idName”) 可以取得 id 为 idName 的HTML对象，在FF中不能

解决方法：

用 getElementById(“idName”) 代替 eval(“idName”)

6. 变量名与某HTML对象 id 相同的问题

问题：

在FF中，因为对象 id 不作为HTML对象的名称，所以可以使用与HTML对象 id 相同的变量名，IE中不能

解决方法：

在声明变量时，一律加上 var ，以避免歧义，这样在IE中亦可正常运行

最好不要取与HTML对象 id 相同的变量名，以减少错误

7. event.x 与 event.y 问题

问题：

在IE中，event 对象有x,y属性，FF中没有

解决方法：

在FF中，与 event.x 等效的是 event.pageX ，但event.pageX IE中没有

故采用 event.clientX 代替 event.x ，在IE中也有这个变量

event.clientX 与 event.pageX 有微妙的差别，就是滚动条

要完全一样，可以这样：

mX = event.x ? event.x : event.pageX;

然后用 mX 代替 event.x

8. 关于frame

问题：

在IE中可以用 window.testFrame. 取得该frame，FF中不行

解决方法：

window.top.document.getElementById(“testFrame”).src = “xx.htm”

window.top.frameName.location = “xx.htm”

9. 取得元素的属性

在FF中，自己定义的属性必须 getAttribute() 取得

10. 在FF中没有 parentElement，parement.children 而用 parentNode，parentNode.childNodes

问题：

childNodes 的下标的含义在IE和FF中不同，FF的 childNodes 中会插入空白文本节点

解决方法：

可以通过 node.getElementsByTagName() 来回避这个问题

问题：

当html中节点缺失时，IE和FF对 parentNode 的解释不同，例如：

FF中 input.parentNode 的值为form，而IE中 input.parentNode 的值为空节点

问题：

FF中节点自己没有 removeNode 方法

解决方法：

必须使用如下方法 node.parentNode.removeChild(node)

11. const 问题

问题：

在IE中不能使用 const 关键字

解决方法：

以 var 代替

12. body 对象

FF的 body 在 body 标签没有被浏览器完全读入之前就存在，而IE则必须在 body 完全被读入之后才存在

这会产生在IE下，文档没有载入完时，在body上appendChild会出现空白页面的问题

解决方法：

一切在body上插入节点的动作，全部在onload后进行

13. url encoding

问题：

一般FF无法识别js中的&

解决方法：

在js中如果书写url就直接写&不要写&

14. nodeName 和 tagName 问题

问题：

在FF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值，在IE中，nodeName 的使用有问题

解决方法：

使用 tagName，但应检测其是否为空

15. 元素属性

IE下 input.type 属性为只读，但是FF下可以修改

16. document.getElementsByName() 和 document.all[name] 的问题

问题：

在IE中，getElementsByName()、document.all[name] 均不能用来取得 div 元素

是否还有其它不能取的元素还不知道（这个问题还有争议，还在研究中）

17. 调用子框架或者其它框架中的元素的问题

在IE中，可以用如下方法来取得子元素中的值

document.getElementById(“frameName”).(document.)elementName

window.frames[“frameName”].elementName

在FF中则需要改成如下形式来执行，与IE兼容：

window.frames[“frameName”].contentWindow.document.elementName

window.frames[“frameName”].document.elementName

18. 对象宽高赋值问题

问题：

FireFox中类似 obj.style.height = imgObj.height 的语句无效

解决方法：

统一使用 obj.style.height = imgObj.height + “px”;

19. innerText的问题

问题：

innerText 在IE中能正常工作，但是 innerText 在FireFox中却不行

解决方法：

在非IE浏览器中使用textContent代替innerText

20. event.srcElement和event.toElement问题

问题：

IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性

解决方法：

var source = e.target || e.srcElement;

var target = e.relatedTarget || e.toElement;

21. 禁止选取网页内容

问题：

FF需要用CSS禁止，IE用JS禁止

解决方法：

IE: obj.onselectstart = function() {return false;}

FF: -moz-user-select:none;

22. 捕获事件

问题：

FF没有setCapture()、releaseCapture()方法

解决方法：

IE:

obj.setCapture();

obj.releaseCapture();

FF:

window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);

if (!window.captureEvents) {

o.setCapture();

}else {

window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

}

if (!window.captureEvents) {

o.releaseCapture();

}else {

window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);

}

CSS部分

div类

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; //使浮动忽略

}

5. padding 问题

FF设置 padding 后，div会增加 height 和 width，但IE不会 （* 标准的 XHTML1.0 定义 dtd 好像一致了）

高度控制恰当，或尝试使用 height:100%;

宽度减少使用 padding

但根据实际经验，一般FF和IE的 padding 不会有太大区别，div 的实际宽 = width + padding ，所以div写全 width 和 padding，width 用实际想要的宽减去 padding 定义

6. div嵌套时 y 轴上 padding 和 marign 的问题

FF里 y 轴上 子div 到 父div 的距离为 父padding + 子marign

IE里 y 轴上 子div 到 父div 的距离为 父padding 和 子marign 里大的一个

FF里 y 轴上 父padding=0 且 border=0 时，子div 到 父div 的距离为0，子marign 作用到 父div 外面

7. padding，marign，height，width 的傻瓜式解决技巧

注意是技巧，不是方法：

写好标准头

高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div

宽尽量用margin，慎用padding，width算准实际要的减去padding

列表类

1. ul 标签在FF中默认是有 padding 值的，而在IE中只有margin有值

先定义 ul {margin:0;padding:0;}

2. ul和ol列表缩进问题

消除ul、ol等列表的缩进时，样式应写成: {list-style.:none;margin:0px;padding:0px;}

显示类

1. display:block,inline 两个元素

display:block; //可以为内嵌元素模拟为块元素

display:inline; //实现同一行排列的的效果

display:table; //for FF,模拟table的效果

display:block 块元素，元素的特点是：

总是在新行上开始；

高度，行高以及顶和底边距都可控制；

宽度缺省是它的容器的100%，除非设定一个宽度

，

，

，， 和

是块元素的例子

display:inline 就是将元素显示为行内元素，元素的特点是：

和其他元素都在一行上；

高，行高及顶和底边距不可改变；

宽度就是它的文字或图片的宽度，不可改变，

，，，，，和 是 inline 元素的例子

2. 鼠标手指状显示

全部用标准的写法 cursor: pointer;

背景、图片类

1. background 显示问题

全部注意补齐 width，height 属性

2. 背景透明问题

IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);

IE: filter: alpha(opacity=10);

FF: opacity:0.6;

FF: -moz-opacity:0.10;

最好两个都写，并将opacity属性放在下面

本文出自：hi.baidu.com/zaku0080/blog/item/c7acb2f3d7536859342accef.html

篇3：浏览器安全之网页上的小甜饼：cookie

浏览器安全之网页上的小甜饼：cookie！

一、什么是cookie？

打开你的Documents and Settings文件夹，进去以后，随便打开一个用户来看看，是不是有一个文件夹叫Cookies，里面装着一堆.txt文件？那么，这个Cookies到底是个什么东东呢？Cookie的英文原意是甜饼，但这里所讲的Cookie可不是糕点哦，它只是一个保存在客户机中的简单的文本文件，这个文件与特定的Web文档关联在一起，保存了该客户机访问这个Web文档时的信息，当客户机再次访问这个Web文档时这些信息可供该文档使用，由于Cookie具有可以保存在客户机上的神奇特性，因此它可以帮助我们实现记录用户个人信息的功能，而这一切都不必使用复杂的CGI等程序。是不是很有意思？

二、Cookie的功能

1.定制个性化空间

用户访问一个站点，可能由于费用、带宽限制等原因，并不希望浏览网页所有的内容。Cookie可根据个人喜好进行栏目设定，即时、动态地产生用户所要的内容，这就迎合了不同层次用户的访问兴趣，减少用户项目选择的次数，更合理利用网页服务器的传输带宽。

2．记录站点轨迹

由于Cookie可以保存在用户机上，并在用户再次访问该Server时读回这一特性可以帮助我们实现很多设计功能，如显示用户访问该网页的次数；显示用户上一次的访问时间；甚至是记录用户以前在本页中所做的选择等等，这可免去我们再去研究复杂的CGI编程。

三、Cookie的组成

类似Javascript变量，Cookie由变量名和值组成。其属性里既有标准的Cookie变量，也有用户自己创建的变量，属性中变量是用变量=值形式来保存。根据Netscape公司的规定，Cookie格式如下：

Set－Cookie: NAME=VALUE；Expires=DATE；Path=PATH；Domain=DOMAIN_NAME；SECURE

NAME=VALUE：

这是每一个Cookie均必须有的部分。NAME是该Cookie的名称，VALUE是该Cookie的值。在字符串NAME=VALUE中，不含分号、逗号和空格等字符。Expires=DATE：Expires变量是一个只写变量，它确定了Cookie有效终止日期。该属性值DATE必须以特定的格式来书写：星期几，DD－MM－YY HH:MM:SS GMT，GMT表示这是格林尼治时间。反之，不以这样的格式来书写，系统将无法识别。该变量可省，如果缺省时，则Cookie的属性值不会保存在用户的硬盘中，而仅仅保存在内存当中，Cookie文件将随着浏览器的关闭而自动消失，

Domain=DOMAIN－NAME:Domain该变量是一个只写变量，它确定了哪些Internet域中的Web服务器可读取浏览器所存取的Cookie，即只有来自这个域的页面才可以使用Cookie中的信息。这项设置是可选的，如果缺省时，设置Cookie的属性值为该Web服务器的域名。Path=PATH：Path属性定义了Web服务器上哪些路径下的页面可获取服务器设置的Cookie。一般如果用户输入的URL中的路径部分从第一个字符开始包含Path属性所定义的字符串，浏览器就认为通过检查。如果Path属性的值为/，则Web服务器上所有的WWW资源均可读取该Cookie。同样该项设置是可选的，如果缺省时，则Path的属性值为Web服务器传给浏览器的资源的路径名。可以看出我们借助对Domain和Path两个变量的设置，即可有效地控制Cookie文件被访问的范围。Secure：在Cookie中标记该变量，表明只有当浏览器和Web Server之间的通信协议为加密认证协议时，浏览器才向服务器提交相应的Cookie。当前这种协议只有一种，即为HTTPS。

四、cookie的安全性

上面我们说到的全都是cookie对我们的好处，但是实际上好象偷偷的被人放了东西在自己的硬盘里（而且还有很多人是在并不知道的情况下）毕竟感觉不是很舒服，尤其是这个文件还可以被远程的服务器长期的监控，修改，记录一些你冲浪的习惯甚至你的相关密码.....这个这个，虽然有一定的便利可图，但是始终感觉不对味....当然，如果遇到一个很正规的大网站当然不用怕，但是要知道世界上还是有很多 网站的哦！所以呢你自己看着办拉，我只是提供这些信息而已，呵呵。最后就是如果你觉得还是对cookie这种东东加以限制的好呢，下面有几种方法，你可以参考参考哦！如果你用的浏览器是IE4：就右件点击Internet Exploer属性安全自定义级别选中禁止所有Cookie使用这个复选项就可以了；如果你用的是IE5，哪就比较麻烦了，因为IE5还有本地、可信站点、受限站点等等级别之分，没办法，你就一个个的设吧。上面的办法都比较麻烦，有没有什么简单点的办法呢？呵呵，其实你只要把刚刚咱们说的cookies文件夹设为只读不就完了吗？不过最后还有些cookie不是放在你能看到的地方，而是放在注册表中的（一说到注册表我头就大了），哪就运行regedit，打开

HKEY_LOCAL_MACHINE/Software/Microsoft/Windows/ CurrentVersion/ InternetSettings / Cache/Special Paths/Cookies

删除其中所有的文件，OK拉，最后再用查找功能一个个的把Cookies找出来，一一删除就行拉！

篇4：浏览器标准测试――Acid3测试网页设计

到现在为止，多数主流浏览器都通过了ACID2测试，如：Firefox 3、Opera 9以及Safari 3等，虽然说IE7未能通过，但是据说IE8可以通过测试，

根据solidot的消息，现在又有了新的测试项目ACID3。ACID3的测试集中在ECMAScript，DOM Level 3，Media Queries，和data: URLs。运行100项测试，根据结果返回通过或没有通过。

今年一月，ACID3测试页还未完成，但是其发布了一个预览版。经过测试(满分100分)：

- Firefox 2得分：59

- Firefox 3 beta2得分：62

- Opera 9.5得分：56

- Safari 3 windows版得分：59

- IE7得分：24

根据测试结果，只有Firefox 3浏览器中该测试页面显示正常，其他浏览均不能正确显示页面，尤其是IE7根本看不到得分，只有通过复制、粘贴手段才看到其得到了最低24分，

官方说：要通过这个测试，其页面动画应该能平滑运行，正确的页面应该像这样(得到100分也未必就是100%支持所有标准)：

篇5：RGBa色彩的浏览器支持网页设计

RGBa是一种在CSS中声明包含透明效果的颜色的方法，它的语法是这样的：

123

div{background:rgba(200,54,54,0.5);}

它允许我们为元素添加透明色，或许我们习惯了使用”opacity“，它很简单易用，但是，opacity会使所有的子元素都变成透明的，而且很难去解决这个问题。（除非使用怪异的定位hack） 跨浏览器透明同样颇为棘手。

通过RGBa，我们可以将一个元素设置为透明，而不会影响其子元素：

声明一个保留颜色

并非所有的浏览器支持RGBa，所以如果允许的话，可以声明一个保留色彩。这个色彩应该是可靠的——所有的浏览器都支持。不声明就意味着，在不支持RGBa的浏览器里面，没有使用颜色。

1234

div{background:rgb(200,54,54);/* The Fallback */background:rgba(200,54,54,0.5);}

不过，这条退路在某些古董级浏览器中依然无效，

RGBa的浏览器支持情况

浏览器，版本，操作系统测试结果退路Firefox 3.0.5 (OS X, Windows XP, Vista)支持—Firefox 2.0.0.18 (PC)不支持纯色Safari 4 (Developer Preview, Mac)支持—Safari 3.2.1 (PC)支持—Mobile Safari (iPhone)支持—Opera 9.6.1不支持纯色IE 5.5 (PC via IETester)不支持无色IE 6 (PC via IETester)不支持纯色IE 7不支持纯色IE 8 beta 2不支持纯色Google Chrome 1.0.154.43支持—Google Chrome 1.0.154.46支持—Netscape 4.8 (PC)不支持没有颜色SeaMonkey 1.1.14不支持无色SeaMonkey 1.1.16不支持纯色SeaMonkey 2.0 beta3支持—Sunrise 1.7.5支持—Stainless 0.2.5支持–Flock 2.0.2支持–BlackBerry Storm Browser支持纯色Camino 1.6.6不支持纯色

上面的数据是通过测试demo得到的，该测试页面包含了更多更完整的浏览器兼容性列表。

对IE浏览器的更好的退路

因为IE浏览器支持条件注释，我们可以抛弃RGB并使用IE的一个私有CSS滤镜来实现同样的效果：

123456789

原文链接：css-tricks

译文主次：RGBa色彩的浏览器支持及其兼容性解决方案

【浏览器 cookie 限制网页设计】相关文章：

1.网页设计论文

2.网页设计教学计划

3.网页设计教学

4.网页设计制作规范

5.网页设计面试自我介绍

6.网页设计大学生求职信

7.网页设计专业自我鉴定

8.美工网页设计个人简历

9.网页设计工作职责职责

10.网页设计理念范文