first-letter « 南芝 – 我才12岁（飞鸟尽，良弓藏，2011，背包去旅行！）

文章关键字 ‘first-letter’

first-letter在各浏览器下的区别（2） at 2009.9.29 17:05

年初写过一次，那次主要测试的li前边的小点以及标点的问题，可以点这里看下~早上玩blog的时候想搞大第一个字又发现了一些问题：

Code：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>first-letter</title>
<style type="text/css">
body { padding:30px; font-size:16px; font-weight:600; color:#333;}
.a,.b,.c { border:1px solid #cacaca; background-color:#eee; margin-bottom:20px; padding:0 10px;}
.a p:first-letter { color:red;}
.b:first-letter { color:blue;}
.c p:first-child:first-letter { color:orange;}
</style>
</head>
<body>
<div class="a">
    <p>张韶涵好漂亮呀~</p>
    <p>张韶涵好漂亮呀~</p>
    <p>.a p:first-letter</p>
</div>
<div class="b">
    <p>张韶涵好漂亮呀~</p>
    <p>张韶涵好漂亮呀~</p>
    <p>.b:first-letter</p>
</div>
<div class="c">
    <p>张韶涵好漂亮呀~</p>
    <p>张韶涵好漂亮呀~</p>
    <p>.c p:first-child:first-letter</p>
</div>
</body>
</html>

当使用first-letter的元素的第一个子元素不是一个文本节点的时候，只有IE8、Safari、Chrome可以达到预定目标，而其它浏览器均不能完成目标，而连续使用两次伪类可以在除了ie6外的其它浏览器下完成预期目标。各浏览器的表现如下图所示：

Demo地址：http://www.12sui.cn/test/first-letter-0909.html

所测试浏览器版本：Opera 10.10 Beta 1792、Firefox 3.5.3、Chrome 3.0.195.21、Safari 4.0.3(531.9.1)

晚上去看《麦田》，Oh ye！~

first-letter在各浏览器下的区别 at 2009.1.28 12:12

first-letter 是设置对象内的第一个字符的样式，基本语法是：Selector : first-letter { sRules } 。但是今天在使用的时候发现了一个有趣的问题。先看看下边的例子吧：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
p:first-letter { color:red; font-weight:600; }
li:first-letter { color:red; }
</style>
</head>
<body>
<p>我才12岁</p>
<p>“我才12岁”</p>
<ul>
    <li>我才12岁</li>
    <li>“我才12岁”</li>
    <li>我才12岁</li>
    <li>我才12岁</li>
</ul>
</body>
</html>

按照我的想法，应该是第一个字母的样式显示，可是测试的结果，却跟我的不太一样，先看看ie6、ie7的显示：

ie6、ie7

Opera下的显示：

ie8、Safari、Firefox、Chrome

再来看看ie8、Safari、Firefox、Chrome下的显示：

Opera

在ie6、ie7和Opera下，对于p来说，只认第一个字符，不管是标点还是文字，而其它浏览器缺会将标点和第一个字符认作一起的，而对于列表来说，ie6和ie7会把前边的列表的符号和第一个字符一起改变样式，而其他浏览器只会认第一个字符。那么它们到底谁对呢，其实不用想，肯定应该是ie6、ie7的错，要不然，ie8也不会向其它浏览器趋同哦，不过我们还是需要证据的。

继续阅读 »

我才12岁 ?

文章关键字 ‘first-letter’

first-letter在各浏览器下的区别（2） at 2009.9.29 17:05

first-letter在各浏览器下的区别 at 2009.1.28 12:12