Archive for October, 2005

Pages (5): « 1 2 3 4 5 »

返回页首(Back to Top)解决方案

Oct 17, 2005 Author: | Filed under: Uncategorized

A (slightly) better technique for “Back to Top” links.

大致内容如下：

一般返回页首(Back to Top)解决方法是，最前面加 anchor

或者

后面返回处直接写链接

笔者认为缺点有二：

1.多余的标签

2.地址栏后面跟个#top，难看。

笔者推荐

而且还可以加入一些翻滚效果

</p> <p> <script type="text/javascript"></p> <p> function backToTop() {</p> <p> var x1 = x2 = x3 = 0;</p> <p> var y1 = y2 = y3 = 0;</p> <p> if (document.documentElement) {</p> <p> x1 = document.documentElement.scrollLeft || 0;</p> <p> y1 = document.documentElement.scrollTop || 0;</p> <p> }</p> <p> if (document.body) {</p> <p> x2 = document.body.scrollLeft || 0;</p> <p> y2 = document.body.scrollTop || 0;</p> <p> }</p> <p> x3 = window.scrollX || 0;</p> <p> y3 = window.scrollY || 0;</p> <p> var x = Math.max(x1, Math.max(x2, x3));</p> <p> var y = Math.max(y1, Math.max(y2, y3));</p> <p> window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));</p> <p> if (x > 0 || y > 0) {</p> <p> window.setTimeout("backToTop()", 25);</p> <p> }</p> <p> }</p> <p> </script></p> <p> </head></p> <p> <body style="margin:20px 200px"></p> <p>1</p> <p>2<br/>3</p> <p>1</p> <p>2<br/>3</p> <p>1</p> <p>2<br/>3</p> <p>1</p> <p>2<br/>3</p> <p>1</p> <p>2<br/>3</p> <p>1</p> <p>2<br/>3</p> <p>1</p> <p>2<br/>3</p> <p>1</p> <p>2<br/>3</p> <p>1</p> <p>2<br/>3</p> <p>1</p> <p>2<br/>3</p> <p>1</p> <p>2<br/>3</p> <p><a href="#" onclick="backToTop(); return false">Back to Top</a></p> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

0 Comments

无空格连续字符自动换行解决方案

Oct 14, 2005 Author: | Filed under: Uncategorized

这绝对是老生常谈了。今天大概看了看，有些小发现。

</p> <style> <p>div {width:300px;border:solid 1px #000}</p> </style> <div>http://blog.guoshuang.com/david/index.asp?vt=bycat&cat_id=31</div> <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

运行这段代码，无论opera,firefox,ie都会出现溢出的现象。小区别在于 firefox 甚至连 / 号也不能自动断开。

IE解决办法

很简单，如下：

</p> <style> <p>div {width:300px;border:solid 1px #000;word-break:break-all;}</p> </style> <div>http://blog.guoshuang.com/david/index.asp?vt=bycat&cat_id=31</div> <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

但这样无法通过目前的html验证，word-break:break-all 属于CSS3的范围。为了验证，你可以用IE注释判断

</p> <p></p> <style> <p>div {width:300px;border:solid 1px #000;}</p> </style> <div>http://blog.guoshuang.com/david/index.asp?vt=bycat&cat_id=31</div> <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

firefox解决办法

在中间适当位置加入 wbr标签。

</p> <style> <p>div {width:300px;border:solid 1px #000;}</p> </style> <div>http://blog.guoshuang.com/<wbr>david/<wbr>index.asp?vt=bycat&cat_id=31</div> <div>aaaaaaaaaa<wbr>aaaaaaaaaaaaaaaaaaaaaaaa<wbr>aaaaaaaaaaaaaaaaa</div> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

opera解决办法

至少目前的opera 8.5版本还不支持 wbr标签。你可以用或者来代替。

</p> <style> <p>div {width:300px;border:solid 1px #000;}</p> </style> <div>http://blog.guoshuang.com/david/index.asp?vt=bycat&cat_id=31</div> <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

兼容性问题：

IE（6以上版本）认识 wbr 不认识

firefox 认识 wbr 不认识

opera 认识不认识 wbr

firefox和opera统一使用 wbr，而指定wbr:after后面软换行。

</p> <style> <p>div {width:300px;border:solid 1px #000;}</p> <p>wbr:after { content: "�0200B" }</p> </style> <div>http://blog.guoshuang.com/<wbr>david/<wbr>index.asp?vt=bycat&cat_id=31</div> <div>aaaaaaaaaa<wbr>aaaaaaaaaaaaaaaaaaaaaaaa<wbr>aaaaaaaaaaaaaaaaa</div> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

opera也可以使用连字符效果来标识换行的发生。

</p> <style> <p>div {width:300px;border:solid 1px #000;}</p> <p>wbr:after {content: "�0AD";}</p> </style> <div>aaaaaaaaaa<wbr>aaaaaaaaaaaaaaaaaaaaaaaa<wbr>aaaaaaaaaaaaaaaaa</div> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

0 Comments

MIME类型查询

Oct 14, 2005 Author: | Filed under: Uncategorized

MIME (Multipurpose Internet Mail Extensions) is an Internet standard for describes message content types.

以下为ie5支持的MIME类型

点击这里打开新窗口浏览此网页

0 Comments

flock 社会浏览器即将推出

Oct 14, 2005 Author: | Filed under: Uncategorized

firefox,opera正和IE打得火热，flock（自称social browser）又加入战团。包括网络协助、blog、共享图片以及网络团体聚会等等功能，从测试版的图片可见一斑。

收藏夹

写Blog界面

写Blog界面？

Flock最新消息:

http://feeds.flock.com/

基本功能：

* The Blog Manager

* The Flickr Topbar

* RSS integration

* Favorites with del.icio.us integration

* The Shelf

* History Search

[Edit on 2005-10-20 14:47:37 By guoshuang]

0 Comments

网页验证

Oct 14, 2005 Author: | Filed under: Uncategorized

页面显示链接

http://validator.w3.org/check/referer

http://jigsaw.w3.org/css-validator/check/referer

http://www.contentquality.com/mynewtester/cynthia.exe?Url1=http://blog.guoshuang.com

实际URL

http://validator.w3.org/check?uri=http%3A%2F%2Fblog.guoshuang.com%2F

http://jigsaw.w3.org/css-validator/validator?uri=http://blog.guoshuang.com

http://www.contentquality.com/mynewtester/cynthia.exe?Url1=http://blog.guoshuang.com

CSS部分问题

本来以为这部分内容最容易通过验证，结果大跌眼镜，：（

border:1px solid #fff #666 #666 #fff;

不能通过验证？

border Too many values or values are not recognized : 1px solid #fff #666 #666 #fff

word-break doesn’t exist : break-all

Property overflow-y doesn’t exist : hidden

ie推荐了该属性到CSS3中，这个不通过也罢。

Same colors for color and background-color in two contexts a.ubblink:hover and a.ubblink:visited

这个倒是能理解，颜色一样就失去区别的意义了。

xhtml验证

DOCTYPE 都没有定义,错误海了去了。

DOCTYPE定义代码：

http://www.w3.org/QA/2002/04/valid-dtd-list.html

508验证

这个蛮有意思，我喜欢。

第一个问题最常见

All IMG elements are required to contain either the alt or the longdesc attribute.

All INPUT elements are required to contain the alt attribute or use a LABEL.

input也必须有alt或者label（进行说明）。

INPUT Element, of Type TEXT, found at Line: 76, Column: 719 contains a non-empty ‘value’ attribute. This is a practice referred to as “self-labeling.” Self-Labeling is argued to be accessible under Priority One or Section 508 guidelines/standards. We recommend using a Label as the Preferred method or the use of an ‘alt’ attribute to make this element accessible.

All OBJECT elements are required to contain element content.

object必须包含element元素

When EMBED Elements are used, the NOEMBED element is required in the document.

Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

没颜色的时候也应该能够正常浏览。

Frames shall be titled with text that facilitates frame identification and navigation.

frame需要title说明一下

Documents shall be organized so they are readable without requiring an associated style sheet.

没有样式表的页面应该也是可以浏览的。（崩溃，：（）

[Edit on 2005-10-14 10:43:07 By guoshuang]

0 Comments

opera bug 缺点统计

Oct 14, 2005 Author: | Filed under: Uncategorized

1.ctrl+enter 补全 www .com

2.view selected source

3.有时突然占用全部 cpu

4.中文编码显示问题

5.bookmarks菜单中无右键选择打开窗口方式

6.f12 无法切换 proxy

7.拷贝文字不如 firefox（换行被删除）

* 没有快捷键来自动完成www…com/www…org/www…net。

虽然可以设定自动补全其中的某一个，但是其补全速度相比具有同样功能的Safari还是太慢了点。

* 稳定性。

虽然稳定性会牵扯到很多其他话题，但是在同一台机器上Firefox能稳定地浏览200左右的feed更新，而Opera在同样的任务中1个月崩溃了3次。

* 没有太好的广告消除插件。

虽然有很多手段来消除广告，但是直到现在确实没有什么可以挑战Firefox下的Adblock。

* 对Ajax支持比较弱。

很多Ajax应用在Opera下仍有这样那样的问题，不过Opera确实一直在改进中。

来自 http://www.kdolphin.org/?p=124

…

[Edit on 2005-10-21 18:53:20 By guoshuang]

[Edit on 2005-12-10 9:41:15 By guoshuang]

[Edit on 2006-1-7 8:38:28 By guoshuang]

0 Comments

Pages (5): « 1 2 3 4 5 »

Flickr PhotoStream

郭爽的网页设计资料

Archive for October, 2005

返回页首(Back to Top)解决方案

无空格连续字符自动换行解决方案

MIME类型查询

flock 社会浏览器即将推出

网页验证

opera bug 缺点统计

Flickr PhotoStream

Recent Posts

Recent Comments

Pages

Categories

Tags

Archives

Blogroll

Meta

Advertising

Most Popular

Recent Comments

Latest Entries