無標題文檔

Explorer6 下的 max-height 属性

今天有用户报告,说打开我们的页面会导致浏览器崩溃。查了下,原来是这句 CSS 导致了性能的问题

_height: expression(this.scrollHeight > 200 ? 200 + 'px' : 'auto');

看来还是 Exploer 的 CSS expression 作祟。简单的说明下这个语句,主要是实现 Exploer6 不支持的 max-height 属性而做的个 Hack(是个「历史遗留问题」)。

期前对于 CSS expression 也做过类似的测试 ,使用程度为--慎用--禁用(原因有三,仅 Exploer 支持、性能消耗很大、脚本和表现混杂)。

这一 Hack 姑且可以被认定为,是在 Exploer6 走向末路之前的「救命稻草」(但目前在日常的项目中,如果出现这样的代码,是无论如何都不会被允许的)。

最后, 简单的写了个 DEMO ,以及更多的信息可以 查看这里

注: Exploer7 已经支持 max-height 等属性。

浏览器的等宽空格

很多时候,希望能够在 HTML 中使用空格排版。但浏览器在解析 HTML 时,会把连续的空格解析成一个,所以我们会使用   等这样的占位符。

但是   也不是很可靠,比如空格间距非常大,那么我们必须增加多个占位符,同时页面的体积会变得非常大。

同时,注意到 Safari 中的   宽度是已设定字符的空格宽度(Safari 的默认字体为 Times),也就是说一个中文字符需要两个占位符。

具体情况如下图所示

https://friable.rocks/_/2009_11_05/2975461746b0.jpg

其实,这不是 Safari 的问题,而是字体的问题。解决的方式就是使用下面的属性

font-family: '宋体';

将 Safari 的默认字体 设置成「宋体」等中英文等宽的字体 ,就能解决。Windows 版本的 Safari 字体设置,需要直接使用中文「宋体」这样的名称而不是「Simsun」(了解原因的兄弟请告诉我)。

但至此,我们的根本目标没有解决,就是能否避免使用   这样的占位符,而使用「原生」的空格。考虑针对空白的相应 CSS 属性,具体了解有关 white-space 的用法 ,接下来就比较好处理了。

总结下使用 white-space 实现等宽空格的条件,有两个。需要设置对应的属性

white-space: pre;

然后设置等宽字符(包括等宽空格)即可。综合起来,就是这样

font-family: '宋体', Simsun;
white-space: pre;

由于使用了中文 CSS 名称,所以在实际使用中需要考虑样式的字符编码问题。同时,需要额外考虑的是,苹果机是否有「宋体」(或者其他等宽的字体), 有苹果机的兄弟请帮忙测试下

--Split--

感谢 小马 提供的另外一个思路,就是使用 em 单位。1em 简单的说,就可以认为是一个字符宽度;同理,.5em 就是半个字符。那么,上面的情况就可以使用这样写。

<span>买<ins class="half-word"></ins>宝<ins class="half-word"></ins>贝:</span><br />
<span>我的淘宝:</span><br />
<span>社<ins class="two-word"></ins>区:</span><br />

对应的 CSS 应为

.half-word {width: .5em;}
.two-word{width:2em;}

经测试通过。

--Split--

针对这上述的两种不同方法,个人认为应当按照实际情况考虑采用。比如第一种方法,虽然依赖具体的等宽字体,但没有添加其他额外的结构,对于以后的维护会更加的方便;第二种方法,则更多的考虑了实际的应用情况(同时也不用依赖具体的等宽字体),但是也添加了额外的结构。

所以,如考虑到以后的可维护性,同时「语义」的角度上分析,推崇第一种做法。而实际的应用情况下,同时需要应用比较复杂时,个人会选用第二种。

另,感谢 小虎 的发言

在没有半角空格的复杂的情况下,可以考虑使用中文的全角空格

移动版本的 Apache + PHP

懒得每次去配置和安装 Apache 以及 PHP 环境了,所以花了点时间整合了下。除去了不必要的扩展,整个安装包仅剩下 4.8MB 大小。

https://friable.rocks/_/2008_08_21/1219290644.png

压缩包整合了 Apache2.2 以及 PHP 5.26 + xdebug 。顺便目录结构说明一下,如上图。配置文件统一放到了 conf 目录下,包括 httpd.conf 以及 php.ini ;Apache 的扩展在 modules 下面,PHP 的扩展在 exts 下,可以自行从原始包中解压缩相应的组件并扩展。

运行相应的 bat 文件就可以添加或者删除系统服务,如果只是移动版本的运行,则直接运行 httpd.exe 即可。Apache 的 DocumentRoot 为 htdocs (里面有个 phpinfo.php,用处不用说了)。

最后, ZIP 压缩包下载 ,希望文件名没有雷到你。

我的照片

嗨!我叫「明城」,八零后、码农、宁波佬,现居杭州。除了这里,同时也欢迎您关注我的 GitHubTwitterInstagram 等。

这个 Blog 原先的名字叫 Gracecode.com 、现在叫 「無標題文檔」 。 要知道作为码农取名是件很难的事情,所以不想在取名这事情上太费心思。

作为八零后,自认为还仅存点点可能不怎么被理解的幽默感,以及对平淡生活的追求和向往。 为了避免不必要的麻烦,声明本站所输出的内容以及观点仅代表个人,不代表自己所服务公司或组织的任何立场。

如果您想联系我,可以发我邮件 `echo bWluZ2NoZW5nQG91dGxvb2suY29tCg== | base64 -d`

分类

搜索

文章