Archive for January, 2005

Pages (11): « First ... « 7 8 9 10 11 »

浏览器窗口内宽度

Jan 4, 2005 Author: | Filed under: Uncategorized

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <body> <script> d=document if (typeof window.innerWidth!='undefined') { var winWidth = window.innerWidth; var winHeight = window.innerHeight; } else { if (d.documentElement && typeof d.documentElement.clientWidth!='undefined' && d.documentElement.clientWidth!=0) { var winWidth = d.documentElement.clientWidth var winHeight = d.documentElement.clientHeight } else { if (d.body && typeof d.body.clientWidth!='undefined') { var winWidth = d.body.clientWidth var winHeight = d.body.clientHeight } } } alert("The Width is "+winWidth+";the Height is "+winHeight) </script> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

[Edit on 2005-1-4 17:28:16 By guoshuang]

0 Comments

face 与 font-family的问题

Jan 4, 2005 Author: | Filed under: Uncategorized

IE没问题，firefox不能用样式表指定 webdings?

解决方法找到，用unicode

showlog.asp?cat_id=31&log_id=2050

[Edit on 2005-1-12 13:56:06 By guoshuang]

0 Comments

mozilla javascript使用注意事项

Jan 4, 2005 Author: | Filed under: Uncategorized

mozilla 为了兼容IE而允许使用 document.all 但是不推荐这样，这不是w3c标准，应该使用 document.getElementById() 注意大小写！mozilla 不能并不绑定顶级对象到他们的id，在IE中可以省略前面的 document.all

如

document.all.test.style

可以省略为

test.style

在Mozilla不可以省略！仍然推荐使用

document.getElementById(”test”).style

使用DOM前最好进行DOM检测,如

<body id="test"> <script type="text/javascript"> if(document.getElementById) { document.getElementById("test").style.backgroundColor="#cc0000"; } </script> </body> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

0 Comments

css 错误检查项目列表

Jan 4, 2005 Author: | Filed under: Uncategorized

意译如下：

# Does the HTML document validate? Styling misnested markup may cause strange effects.

html 验证了吗？

* The and

aaa

运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

IE 6 加上 strict.dtd 后，显示正确。但低版本仍然会有问题。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <style> div { width:100px; padding:10px; border:10px solid #333; } </style> <div>aaa</div> </html> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

hack 方法一：

div嵌套，在里面的div设置padding和border（背景为100×100的格子）注意：这里例子中为了让大家看清楚，我加了1px的红线，在非IE浏览器下实际宽度是102了。

<html> <style> body {background:url(images/100x100.png);margin:0;padding:0;} div.container { width: 100px; border:1px solid red} div.i { padding: 10px; border:10px solid #333} </style> <div class="container"> <div class="i">aaa</div> <div> </html> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

hack 方法二：

这是主要针对IE5.x的方法，至少我这里没有测试。我的理解是即使ie5.x加上strict.dtd，也会显示错误，所以…

以下为引用内容:

The basic structure is this:

div {

width: 100px;

}

div {

width: 140px;

width: 100px;

}

The top rule (line 1) is used by browsers like Op5 that get the box model correct, but choke on the escapes in the following rule. Op5 ignores those rules entirely.

The first ‘escaped’ property (line 5) will be used by IE5.x, and feeds that browser its ‘fudged’ value. The second escaped property (line 6) cannot be read by IE5.x, but is read and used by modern ‘escape friendly’ browsers like N6, Moz, Op6, and IE6.

Note: If Nav4 sees even one escape anywhere in the CSS, it will discard the entire sheet. So it is vital that this hack be hidden from that browser, by means of @import, or the CaioHack. For a detailed explanation of the escape parsing bug see that Andrew Clover [post].

Proper use of the escapes: The escape that starts line 5 must always be directly against the first letter of the property name. IE5.x/win does not like escapes, but seems to ignore them when they are in this position.

Important! An escape must not precede any of the first six alphabetical characters: a, b, c, d, e, f, per the [CSS spec on forward-compatible parsing]. If this is done it will be seen as a ‘hex code’ and Bad Things Will Happen. This means that a property that begins with one of these letters cannot be hacked in this manner. For example, “height” can be hacked, but “font-family” can’t be, since it starts with a character that is interpreted as the beginning of a hex code. Fortunately, neither “width” nor “height”, the most important properties for this hack, are affected.

For line 6 (modern browsers) the escape must be within the property name, and the previous ‘hex’ rule applies.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <style> body {background:url(100x100.png);margin:0;padding:0;} div { width: 400px; width: 100px; background:red; padding:10px; border:10px solid #333; } </style> <div>aaa</div> </html> 显示更多

hack 方法三：

综合上面的方法，使用 * html div 来屏蔽IE浏览器。注意：ie6如果有strict 声明也基本算是“非”IE类型。

<html> <style> body {background:url(images/100x100.png);margin:0;padding:0;} div { border: 10px solid #333; padding: 10px; width: 100px; background:red } * html div { width: 140px; } </style> <div>aaa</div> </html> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <style> body {background:url(images/100x100.png);margin:0;padding:0;} div { border: 10px solid #333; padding: 10px; width: 100px; background:red } * html div { width: 140px; width: 100px; } </style> <div>aaa</div> </html> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

解释如下：

以下为引用内容:

The first rule contains all the necessary CSS for the box including borders, paddings, and width value for browsers that properly implement the CSS box model.

The second rule uses the StarHtmlHack. Since html is the root element the selector ” * html ” shouldn’t match any element in a valid html/xhtml document. But IE (for Windows and the Mac) seem to ignore the universal selector (asterisk) when it precedes “html”. Same goes for the selector “* * body”. Because of this peculiarity we can effectively hide an entire rule from all browsers except IE.

Line 10 is read by all IE versions. Line 11, however, as explained above in the section on the SBMH is hidden from IE5.x/Win because of the character escape. IE5/Mac and IE6/Win which implement the CSS box model correctly, therefore, properly get a width of 100px.

Because the star html selector does not match any actual element, browsers that are phobic to escapes such as NS4.x and Opera 5, will not even bother looking at the declaration block, and therefore are effectively shielded from escapes.

IE注释（comment）hack

解释如下：

以下为引用内容:

The following techniques rely on the fact that all IE/Win (and, unfortunately, IE/Mac too) have various forms of [comment bugs], i.e., depending on where the comment is placed one version or another of IE will ignore the declaration where the comment is found.

Here are the specific comment bugs that are put to good use in the hacks:

* When a property is immediately followed by an empty comment (no whitespace inside), that declaration is hidden from IE5.0/Win and IE5/Mac.

* When a property is immediately followed by a comment that contains at least one whitespace, that declaration is hidden from IE5.0/Win and IE5/Mac. In addition the next declaration is also hidden from IE5.0/Win.

* When a comment immediately precedes a value that declaration is hidden from IE5.5/Win.

* When a property is followed by at least one whitespace and which is then followed by a comment (comment must be before the colon) that declaration is hidden from IE6/Win.

As in the all the hacks above the three techniques below intend to serve IE5.x/Win the total width of the box, and supply the content width to other browsers.

Technique 1

Syntax:

div

{

border: 10px solid;

padding: 10px;

width: 140px;

width/* */:/**/100px;

width: /**/100px;

}

Line 5 is read by all browsers. Line 6 is hidden from IE5.x/Win. But because there is whitespace inside the comment adjacent to width IE5.0/Win will also ignore the declaration that immediately follows. Therefore, line 7 is hidden from it as well. Line 7 is also hidden from IE5.5/Win because of the comment adjacent to the value. Lines 6 and 7 are not hidden from IE6/Win.

Technique 2

Syntax:

div

{

border: 10px solid;

padding: 10px;

width: 100px !important;

width: 140px;

width/**/:/**/100px;

}

Line 5 is read by all browsers. But IE/Win does not implement !important so this width value will not override the other two. Line 7 is hidden from IE5.x/Win. Therefore, IE5.x/Win will apply the width value in line 6. IE6/Win meanwhile will read all the width values but apply only the last one (line 7)

Technique 3

Syntax:

div

{

border: 10px solid;

padding: 10px;

width: 100px !important;

width /**/:140px;

}

Line 5 is read by all browsers. But IE/Win does not implement !important so this value is not given any importance by that browser. Line 6 is hidden only from IE6/Win. Therefore, IE5.x/Win and any other browser that does not properly implement !important will get a width of 140px.

Important Note: The order of the various width declarations is crucial. They must appear as shown in each of the three techniques above, else the hacks will fail. However, other declarations (e.g. background-color, font-size, position, etc.) may appear before and after them.

As you may have already noticed these three techniques obviate the need for two rule sets, thus simplifying the style sheet.

This is a very brief intro to the techniques. A more comprehensive discussion is available at the [Alternate Box Model Hacks page]. You may also want to [test] how your browser reacts to the hacks. Included in that page is a table summarizing the results of browser testing.

还有这两种方法：

以下为引用内容:

Another Solution by Tantek

Another way to get around IE5’s buggy box model is the Mid Pass Filter (http://www.tantek.com/CSS/Examples/midpass.html). This seems like the best solution, because it doesn’t break in any browsers. On the plus side it also seperates hacks from normal code.

div {

border: 10px solid;

padding: 10px solid;

}

@media tty {

i{content:”";/*” “*/}} @import ‘midpassbefore.css’; /*”;}

}/* */

div {

width: 100px;

}

@media tty {

i{content:”";/*” “*/}} @import ‘midpassafter.css’; /*”;}

}/* */

Then midpassafter.css contains

div {

width: 140px;

}

CSS3 box model hack

div::outside { width: 100px; }

div { padding: 20px; }

哎，正象我当初给firefox的推出泼点冷水写的那样，这么多hack，真是一场web Designer 的噩梦…

原文在：

http://css-discuss.incutio.com/?page=BoxModelHack

[Edit on 2005-1-4 11:49:54 By guoshuang]

0 Comments

标准模式下 img和table之间缝隙的问题

Jan 4, 2005 Author: | Filed under: Uncategorized

In fact, the above code won’t even function as intended in documents served using a strict doctype — small gaps will appear beneath the corner images, caused by the fact that images are inline elements and, hence, leave space beneath the image for the “tails” on letters such as ‘y’ and ‘j’. The solution, as explained by Eric Meyer in Images, Tables and Mysterious Gaps, is to add the following rule to your stylesheet:

td img { display: block; }

注意下面代码运行后，图片之间的间隙问题。（FF会看到，IE反而看不到效果）

非标准模式（非 strict dtd声明）

<html> <style type="text/css"> img {border:1px solid #333} table {background:#9ac} </style> <table cellpadding="0" cellspacing="0"> <tr> <td><img src="smile/01.gif" alt="" /></td> <td><img src="smile/02.gif" alt="" /></td> </tr> <tr> <td><img src="smile/03.gif" alt="" /></td> <td><img src="smile/04.gif" alt="" /></td> </tr> </table> </html> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

标准模式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <style type="text/css"> img {border:1px solid #333} table {background:#9ac} </style> <table cellpadding="0" cellspacing="0"> <tr> <td><img src="smile/01.gif" alt="" /></td> <td><img src="smile/02.gif" alt="" /></td> </tr> <tr> <td><img src="smile/03.gif" alt="" /></td> <td><img src="smile/04.gif" alt="" /></td> </tr> </table> </html> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

加入td img {display:block}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <style type="text/css"> img {border:1px solid #333} table {background:#9ac} td img {display:block} </style> <table cellpadding="0" cellspacing="0"> <tr> <td><img src="smile/01.gif" alt="" /></td> <td><img src="smile/02.gif" alt="" /></td> </tr> <tr> <td><img src="smile/03.gif" alt="" /></td> <td><img src="smile/04.gif" alt="" /></td> </tr> </table> </html> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

来自

http://www.sitepoint.com/article/rounded-corners-css-javascript

参考页面：

http://web.archive.org/web/20040202073255/http://devedge.netscape.com/viewsource/2002/img-table/

http://css-discuss.incutio.com/?page=BoxModelHack

[Edit on 2005-1-4 9:58:10 By guoshuang]

[Edit on 2005-1-4 10:04:03 By guoshuang]

0 Comments

Pages (11): « First ... « 7 8 9 10 11 »