标签归档:html

有时候注释也不能乱写

让我们看看这个很简单的例子:







尝试分别在各种浏览器下运行它:






在大多数情况下,我们得到了正确的预期中的结果,如下图所示:
大多数浏览器下的执行效果

但是不要忘了神一般的IE6,OMG,发生了什么:
IE6下的运行效果

经过我一个像素一个像素的测量,发现当其中一个div减少3px的时候,在IE6下就能并排显示
这个数值很容易让人想到The IE6 Three Pixel Gap,但也不是这个问题,真正的原因在于那句注释,将注释去掉就能在IE6下也得到正确的结果

有时候嵌套过多时,我们为了方便地找到嵌套的首位,会比较习惯于在开始和结束的地方加上注释,这时候如果碰到float就要慎重了,我测试了将注释换行或者加上空行分隔,都不能解决此问题

再次呼吁抛弃IE6!

另外还有css和js文件的注释,最好写英文注释,当然最好的习惯是将所有文件保存为统一编码
我碰到的几次问题是utf8的html引入编码为ansi的js文件,结果由于字符集的问题导致js中的单行(即//开头的注释)中文注释不能正确断行,导致下一行本应执行的语句被注释掉,由此可以推出一个好的编码习惯,即在单行注释末尾也加分号

允许本地文件系统上的 HTML 页访问脚本

我都不知道什么时候开始就有这个问题了,我记得以前是没问题的……
症状很简单,写一行最简单的javascript代码,例如“alert(1);”,保存成.js文件
接着在一个html文件中用script标签引入该js,在IE7下打开始终提示无效字符,简直让我抓狂了
(最诡异的事情是有时候改个文件名又能执行,有的文件名又不行,见鬼)

于是分析问题,用IETester的IE6标签打开,一切正常
放到webserver下通过http访问,也正常
这样基本可以确定是本地安全策略的问题

把Internet选项的安全设置本地设为低,再打开之前的文件,竟然……还不行

最后搜到了微软的官方说明(据说是机器翻译,可读性还挺不错):

Internet Explorer 7
如果使用 Internet Explorer 7 时遇到此问题,请按照下列步骤:

1. 单击 开始 ,单击 运行 ,在 打开 的框中键入 Regedit ,然后单击 确定 。
2. 找到下面的注册表项,并单击下面的注册表项:
HKEY_LOCAL_MACHINESOFTWAREMicrosoftInternet ExplorerMainFeatureControlFEATURE_BLOCK_LMZ_SCRIPT(注:这个项默认似乎没有,得自己建立)
3. 在 编辑 菜单上指向 新建 ,然后单击 DWORD 值 。
4. 在 DWORD 值 框中,键入 iexplore.exe ,,然后再按 Enter。
5. 双击在步骤 4 中创建 iexplore.exe 注册表项。
6. 在在 数值数据 框中键入 0 ,然后单击 确定 。
7. 退出注册表编辑器。

按照文中的说明,Windows Server 2003 Service Pack 2 中的 Internet Explorer 6可能也会有此问题

问题解决了,不过我还是纳闷以前怎么没碰到过这个问题,难道是最近的安全更新才有的?

TWebBrowser显示自定义Html内容


uses
ActiveX, MSHtml;

var
Document: IHtmlDocument2;
V: OleVariant;
begin
WebBrowser1.Navigate(‘about:blank’);
Document := WebBrowser1.Document as IHtmlDocument2;
V := VarArrayCreate([0, 0], varVariant);
V[0] := ‘Hello World’;
Document.Write(PSafeArray(TVarData(v).VArray));
end;

Firebug

为什么我今天才知道这个插件……
相见恨晚啊

安装地址:http://www.getfirebug.com/
如果想在firefox以外使用:http://www.getfirebug.com/lite.html

主要功能简介:
1、Inspect and edit HTML

Firebug makes it simple to find HTML elements buried deep in the page. Once you’ve found what you’re looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.

可以用鼠标选择element并高亮显示出相应的代码,然后可以编辑代码并实时看到效果

2、Tweak CSS to perfection

Firebug’s CSS tabs tell you everything you need to know about the styles in your web pages, and if you don’t like what it’s telling you, you can make changes and see them take effect instantly.

自动完成功能相当强大。还有一个不错的功能是提示哪些语句没有发生作用(多余的、被废弃),例如我们单位系统找人做的页面,css重复定义特别多。如果想调整样式,还可以点击每一行左边的小图标临时禁止该项。
css.jpg

3、Visualize CSS metrics

When your CSS boxes aren’t lining up correctly it can be difficult to understand why. Let Firebug be your eyes and it will measure and illustrate all the offsets, margins, borders, padding, and sizes for you.

可视化的调节页面边距等样式
可视化调节CSS

如果Inspect选择了element,还可以显示标尺
页面标尺

4、Monitor network activity

Your pages are taking a long time to load, but why? Did you go crazy and write too much JavaScript? Did you forget to compress your images? Are your ad partner’s servers taking a siesta? Firebug breaks it all down for you file-by-file.

可以查看页面以及页面内所有文件的载入速度,从而进行相应的优化
页面载入时间

5、Debug and profile JavaScript

Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and have look at the state of the world. If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast.

debug javascript,我最需要的功能,想了很久了,这个插件很方便的实现了,而不用安装别的一些庞然大物。
断点执行断点执行

6、Quickly find errors

When things go wrong, Firebug lets you know immediately and gives you detailed and useful information about errors in JavaScript, CSS, and XML.

7、Explore the DOM

The command line is one of the oldest tools in the programming toolbox. Firebug gives you a good ol’ fashioned command line for JavaScript complete with very modern amenities.

8、Logging for JavaScript

Having a fancy JavaScript debugger is great, but sometimes the fastest way to find bugs is just to dump as much information to the console as you can. Firebug gives you a set of powerful logging functions that help you get answers fast.

打印 HTML 网页强制换页的方式

转载自:http://www.neo.com.tw/archives/000798.html

打印 HTML 无法强制换页其实是一件很令人困扰的事,要达到这个功能其实可以透过 CSS 的 Pagebreak 来处理。
强制分页有大概只有二种用的到:

{ page-break-after: always; /*在标签后换页*/ }
{ page-break-before: always; /*在标签前换页*/ }

这二个当中,大概最常用的就是 page-break-after: always,就是在指定的标签后强制换页,可以参考下面的 HTML 范例:

第一页

第二页

再来就可以试着打印看看效果如何。
其它 CSS 打印相关属性可以参考:
http://www.w3schools.com/css/css_ref_print.asp