“扯扯页面”目录存档

button标签的type属性默认值是？

2010年07月27日
林小志 发布在 扯扯页面 分类中， 该日志有 4 条评论 »

晚上突然间看到大猫的头像在闪动，速度打开一看，发现他问，以前我写button标签的时候有没有写type属性，老实的我只有诚实地告诉他，我没写type属性的，因为记得曾经某一个开发同学跟我说，要不你就不要写type属性吧，以后需要他们来控制就好了，所以我一直就没写了。

大猫的测试代码：http://www.linxz.cn/demo/button_type.html

好奇心比较重的我就在想，为什么大猫他突然会问这个事情呢，仔细盘问之后才晓得，原来他没写type属性的时候，在输入框得到focus的时候，直接回车就提交了，也就是说没有type属性的button标签默认值是submit。那么换句话说，以前我记得button标签的type属性默认值为button是错误的。

经过对几个浏览器的对比查看，最终发现只有IE7（或许IE6也是这样的，没测试过）的button标签默认值是button，其他的浏览器都是sumbit。借用大猫的一句话就是“微软虽然改变了路线，但是没把屁股擦干净”，^O^ IE8都有了，他们怎么可能会去擦IE7的屁股呢。

然后在w3school网站中可以看到这么一句话“The button is a submit button (this is default for all browsers, except Internet Explorer)”。好吧，我又长见识了！

标签：,,

使用css2.1实现多重背景、多重边框效果

2010年06月22日
林小志 发布在 扯扯页面 分类中， 该日志有 23 条评论 »

翻译声明：

小志不才，看到这篇文章感觉不错，就通过好多翻译工具以及结合个人对文章的理解翻译了一下这篇文章，如有不妥之处望指教！

重要说明：文章原出处：http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/如果有转载的朋友切记一定要保留这个出处，谢谢！

如果可以的话也请保留一下小志第一次翻译的这篇文章的原链接：http://blog.linxz.cn/multiple_backgrounds_and_borders_with_css2/

——————– 不 可 爱 的 分 割 线 ——————————

使用css2.1实现多重背景、多重边框效果

在单个HTML元素上利用CSS2.1实现拥有3张背景图片和2张内容图效果，或者多重边框的效果。这种渐进增强的方式适用于所有支持CSS2.1伪元素及其定位属性的所有浏览器。不需要CSS3的支持。

(全文…)

标签：,,,,

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

2010年06月11日
林小志 发布在 扯扯页面 分类中， 该日志有 10 条评论 »

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

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

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

标签：,,,

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

2010年05月7日
林小志 发布在 扯扯页面 分类中， 该日志有 8 条评论 »

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

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

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

(全文…)

标签：,,,,

关于a标签中图文链接在IE的一个BUG分析

2010年05月5日
林小志 发布在 扯扯页面 分类中， 该日志有 17 条评论 »

在此必须要声明一点，或许有朋友认为小志博客中的日志还算OK，因此转载了文章，如果你们在转载的时候遗漏了日志的原文出处没关系，但请千万不要修改原文内容，有不同意见可以增加备注，但请保证原文的一致性，必要产生不必要的误解，在此小志先谢过了。

此文中提到的问题是在IE6/IE7中出现的

在五一之前Rock给了我一个很好玩的demo，当时我看到他所给代码跟截图时心中想到这个解决方法应该有很多哦，为什么一定要这样折腾自己呢，搞那么问题BUG出来呢。不过后来深入的了解之后才发现这个问题真的很好玩，当时一直想不出来为什么，然后Rock告诉我说他问题是解决了，但不知道是为什么。而解决的办法他提到了“无法冲破的z-index”让我猛然想起了小毅写的《position:relative/absolute无法冲破的等级》，难道跟这个有关，简单测试一下，果然如此。

当时虽然是解决了问题，不过也没啥心情去折腾个究竟，丢在桌面无视之。晚上突然感觉想到，于是乎就有了这篇日志了。废话不多说，先来看Rock给我的demo，似乎有点被修改过了，那么我自己也来整一份吧，请点这里看我整的这个DEMO，用IE打开哦。

(全文…)

标签：,,,

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

2010年04月20日
林小志 发布在 《CSS那些事儿》, 扯扯页面 分类中， 该日志有 10 条评论 »

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

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

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

?View Code XML
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伪对象有一个浮动的属性。后来我想想，为什么这个有浮动属性就要清除浮动，这个问题似乎需要说明一下。

(全文…)

标签：,,,,

拥有阴影并且能自适应的弹出层

2010年04月5日
林小志 发布在 扯扯页面 分类中， 该日志有 15 条评论 »

依稀记得今天所要与大家分享的这点内容是以前在迅雷工作的时候，大仙曾与几位重构师分享过，不过当时并没十分在意，只是依稀记得大致的实现方式，这次自己再在这个大致的实现方式上去实验，最终将结果分享出来供大家批斗，不妥的地方请大家多多提意见。

弹出层是现在网站中使用率很高的一个效果，有半透明的黑屏中叠加一个层，也有弹出层的旁边出现透明边框的方式。总之呢，形式呢是多姿多彩，但基本的原理都是差不多，小志这次要跟大家分享的并不是面面俱到的所有方式的弹出层，而是一个拥有阴影（或者说是透明边框）并且能自适应宽高的弹出层。

实现的方式有几种，但为了页面的整体性能会对IE进行选择性的舍弃。废话不多说了，先来看一下大概的页面表现效果吧。

>>>点击查看demo<<<
(全文…)

标签：,,,,,

踏上寻找webkit内核渲染HTML的默认样式之路

2010年03月5日
林小志 发布在 扯扯页面 分类中， 该日志有 15 条评论 »

制作页面的时候大家都会reset样式，但到底我们需要reset一下html标签中被渲染的哪些样式属性呢，一直都很好奇这个问题，也一直在寻找这个答案。前几天有幸从iwege处得知webkit内核下载的页面（http://nightly.webkit.org/），明天组内要出去旅游了，晚上早点回来休息一下，最终还是按捺不住，打开了这个页面下载了最新版本的webkit源码，结果是C++写的，看不懂，悲剧！

幸运的人儿总是会得到上帝的眷顾，翻箱倒柜之后找到了我所想要的文件，并且简单的进行实验之后，发现都是较为符合，猜想应该就是webkit内核中对于CSS样式属性了。好东西当然不能独享，独乐乐不如众乐乐嘛，跟大家分享一下，顺便也请大家一起看看这个到底是不是我们在safari等一些webkit内核浏览器中看到“默认样式”。

附带由CSS群中LEE提供的gecko内核的firefox浏览器对于CSS样式属性的文件，该文件可以在firefox的安装目录中找到，路径为：安装盘符:\Program Files\Mozilla Firefox\res

(全文…)

标签：,,
« 较老的文章