文章关键字 ‘浏览器’

小试CSS3旋转属性玩玩叠加的照片堆

2010年06月11日

现在CSS3被大家说得火热火热的,晚上突然间有股冲动,想小试一把CSS3,看看她的魅力到底有多大,没想这个魅力让我自己都十分惊讶,事实证明真的很好玩。

代码什么的就不写了,其实很简单,这次玩的仅仅只是旋转的属性 transform ,关于这个属性大家可以自己去尝试一下。小志不才,就是把图片定位叠加,然后旋转了一下。并且当鼠标经过的时候再将其转正,第一次玩CSS3,而且最近也比较忙,没具体写内容了。嘻嘻……别怪我懒

啥也不说,直接看效果吧,如果你的浏览器支持CSS3,那么就疯狂点击这里

分析border边框属性在浏览器中的性能对比

2010年05月7日

当初写完了《分析border边框属性在浏览器中的渲染方式》这篇日志后,有人跟我说,“小志啊,你这个并不能说明border:0 none;方式性能就是好的啊”。这点我承认,的确如此,因为那篇日志仅仅只是说明了border针对input标签和button标签在渲染方式的一个渲染方式对比。

然而今天在涛哥的勾引下,我使用了谷歌浏览器作为平时默认浏览器,顺带安装了一些插件,值得一提的是谷歌浏览器自带的有一个叫“任务管理器”的东西比较好玩,可以看很多参数,比如什么“缓存”啦、“内存”啊之类的。

“内存”这个东西我看了之后,突然想到曾经不是有人说border渲染后的性能么,于是乎,就在原来的那个demo基础上针对border:0;border:none;以及border:0 none;这三个做了一个简单的对比。

(全文…)

关于利用:first-letter实现首字下沉的一些看法

2010年04月20日

前几天在“CSS那些事儿”的群中,一位读者朋友(小土豆)问我书中提到首字下沉的时候为什么要增加一个清除浮动。当时我自己一时迷惑了,为什么呢,怎么一点印象都没有呢。赶紧打开电子版的《CSS那些事儿》找到相对应的章节,并且在各个浏览器中测试了之后才发现,我当初对这块的说明太少了,才让她产生了一些不理解的想法,或许也有其他的一些读者会存在这样的问题。

发现了问题就需要解决问题,因此我就拿这个首字下沉的时候为什么要清除浮动而做了一系列的测试,结果让我感觉有点崩溃,原来我在那章节中说明的内容太少了,在这里赶紧做个补充,希望读者朋友们能看到这篇文章后不会再对那个清除浮动而产生迷惑。

首先来看一下我在书中仅有的一段对首字下沉进行说明的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
<style type="text/css">
p:first-letter {
	float:left; /* 设置段落p标签的首字为浮动,让其占据多行的空间 */
	font-weight:bold; /* 加粗段落p标签的首字 */
	font-size:2em; /* 设置段落p标签的首字为其他字体的2倍 */
}
p {clear:both;} /* 清除首字的浮动,避免影响p标签的高度与其相叠加 */
</style>
 
<h2>【端午节由来】</h2>
<p>关于端午节的来历,归纳起来,大致有以下诸说:</p>
<p>迎涛神,此说出自东汉<span>《曹娥碑》</span>。曹娥是东汉上虞人,父亲溺于江中,数日不见尸体,当时孝女曹娥年仅十四岁,昼夜沿江号哭。过了十七天,在五月五日也投江,五日后抱出父尸。</p>
<p>春秋时吴国忠臣伍子胥含冤而死之后,化为涛神,世人哀而祭之,故有端午节。</p>

在书中所提到的注释里,仅对p标签清除浮动做了一个简单的说明,内容如下:

p {clear:both;} /* 清除首字的浮动,避免影响p标签的高度与其相叠加 */

就是因为这么一句话,让小土豆这位读者产生了猜想,为什么要清除浮动。在部分读者眼中或许已经比较清楚明白为什么要清除浮动,因为:first-letter伪对象有一个浮动的属性。后来我想想,为什么这个有浮动属性就要清除浮动,这个问题似乎需要说明一下。

(全文…)

分析border边框属性在浏览器中的渲染方式

2010年02月24日

针对border边框属性在浏览器中的渲染方式很早以前就开始在QQ群中看到大家在讨论,而我也一直以border:0 none;的方式处理。其中当然也是有我自己为什么要做的原因,对于这个原因在下面的分析中将会提到。在对border边框属性进行分析之前,需要说明的几点内容是:

  1. 小志我并不是一个分析专家,只是借助Firebug和IE developer这两个工具在FF浏览器和IE浏览器中查看浏览器的渲染结果;
  2. 因为只是查看了FF浏览器和IE浏览器的渲染结果,并不能代表所有的浏览器都是相同的方式进行渲染。

为了能更好的对边框的样式进行对比,这里我们选用的是“按钮”元素,但使用的标签却是不同的,它们分别是input标签元素和button标签元素。顺带需要提到的一点就是,这两个标签元素在各个浏览器中的共同点是都属于系统控件元素,边框样式以及按钮背景都是跟系统主题有着绝对性的关系。

(全文…)

输入框文本选择时的背景色问题

2010年01月31日

近期在一个项目的开发过程中,开发童靴拿了一个问题问我,当时我十分纳闷为什么会出现那个问题,后来在CSS森林群里也问了,当时Leeiio跟我说他在window系统中是OK的,怀疑是我的系统主题有关系。因为我的系统主题使用的比较特别,个人也很喜欢(感谢pufen提供),但开发童靴那边是经典主题啊,十分纳闷。

今天抽空在半夜写下这篇日志,记录一下这个问题,不知道算不算是一个BUG吧。

问题来源是开发童靴在把鼠标焦点定位在文本输入框的时候,发现文字的背景颜色很淡,而且仅仅只是在IE浏览器才会这样,但是在其他个别文本输入框中选择文字的时候背景是深色的。
PS:该问题仅仅只是在IE浏览器中才会有,其他浏览器是正常的。
(全文…)