今天读了怿飞的display:inline-block的深入理解这篇文章。发现,原来这些问题别人早就遇到过了。
我想有自己的见解,因此瞎编了这么一段解释:“inline-block按字面理解,将行内转换为块级,而div标签是行内吗?显然不是,因此就不发生作用啦!”。
真想写点东西,可没什么写的了。
因为我发现,在所有浏览器兼容问题中,有99%的问题都被先哲们经历且一定程度上解决了。
情况只会越来越好,而那些今天必须掌握的兼容技巧也许会慢慢淡出视线。
不知道以后讨论什么?或许是更偏向技术理论方面.....
2008年10月25日星期六
2008年10月1日星期三
给img设置双边框
看了怿飞的可以给img元素设置背景图这篇文章,关于设置双边框的那个例子。我是这么干的,不过,多了一个外围标签。
CSS:
<style type="text/css">
a{border:solid 1px #777;display:inline-block;padding:2px;}
img{border:solid 1px #aaa;display:block;padding:5px;}
</style>
XHTML:
<body>
<a href="#"><img src="apache_pb22.png" /></a>
</body>
效果:(这里使用了一个外围A标签,如果这个图片不是一个超链接,那么把a换成span)
CSS:
<style type="text/css">
a{border:solid 1px #777;display:inline-block;padding:2px;}
img{border:solid 1px #aaa;display:block;padding:5px;}
</style>
XHTML:
<body>
<a href="#"><img src="apache_pb22.png" /></a>
</body>
效果:(这里使用了一个外围A标签,如果这个图片不是一个超链接,那么把a换成span)
2008年9月22日星期一
“NEW CREATIVE SUITE 4”就要正式发布了
现在是北京时间2008年09月22日23:40,再过20分钟,东八区跨入23日。
按照美国中部时间,还有过14个小时就是23号(这时区该怎么换算呢?),意味着 NEW CREATIVE SUITE 4 正式发布。价格用脚趾头想想,不低于3位数的$,天生穷命。嘻嘻,在下世纪,买软件或iphone就像买白菜一样了 。

最期待其中的Dreamweaver CS4。
在网上下载的测试版非常好用,界面就让人振奋,不足之处就是容易崩溃。
dw cs4界面上的界面字体样式,跟iphone中的很像,很漂亮。

美好的23日,happy day。
25日,天公作美的话,神七将会发射,happy day!
按照美国中部时间,还有过14个小时就是23号(这时区该怎么换算呢?),意味着 NEW CREATIVE SUITE 4 正式发布。价格用脚趾头想想,不低于3位数的$,天生穷命。嘻嘻,在下世纪,买软件或iphone就像买白菜一样了 。

最期待其中的Dreamweaver CS4。
在网上下载的测试版非常好用,界面就让人振奋,不足之处就是容易崩溃。
dw cs4界面上的界面字体样式,跟iphone中的很像,很漂亮。

美好的23日,happy day。
25日,天公作美的话,神七将会发射,happy day!
2008年9月18日星期四
纠正:不是web developer 1.1.6的一个小bug
打开阿里巴巴的首页,等待页面加载完毕后,选择Disable--Disabled JavaScript--All JavaScript。
然后点击左边二级菜单的标题右侧的小三角形(“Browse by Category”右侧的小三角形)。会发现弹出层依然可用,可以肯定的是,这是JavaScript在执行。
应该算是web developer的一个小bug了。

且下面的切换效果也仍然可用:

环境:Firefox 3.0.1,Web Developer 1.1.6,Firebug1.21(不会是Firebug在作怪吧! )(-:
汇报给web developer的作者。 (-:
----------------------作者回复的分割线--------------------------------
大概意思是说,不是web developer的问题,而是Mozilla的问题。
----------------------回复内容--------------------------------
然后点击左边二级菜单的标题右侧的小三角形(“Browse by Category”右侧的小三角形)。会发现弹出层依然可用,可以肯定的是,这是JavaScript在执行。
应该算是web developer的一个小bug了。

且下面的切换效果也仍然可用:

环境:Firefox 3.0.1,Web Developer 1.1.6,Firebug1.21(不会是Firebug在作怪吧! )(-:
汇报给web developer的作者。 (-:
----------------------作者回复的分割线--------------------------------
大概意思是说,不是web developer的问题,而是Mozilla的问题。
----------------------回复内容--------------------------------
This is because the JavaScript for that event has already loaded so it
is still functional. If you disable JavaScript before the page loads
then it doesn't work.
Note that disabling JavaScript in the extension just disables it using
the default browser preference so if you still consider this a bug you
should report it to Mozilla not me.
is still functional. If you disable JavaScript before the page loads
then it doesn't work.
Note that disabling JavaScript in the extension just disables it using
the default browser preference so if you still consider this a bug you
should report it to Mozilla not me.
2008/9/21 :
> ---------Google automatic translation---- Hello, I am a user of the Web
> developer, a few days ago, it found a bug. 1: Open the home page Alibaba
> http://www.alibaba.com, and wait for the page loaded. 2: web developer ->
> Disable-> Disabled JavaScript -> All JavaScript 3: Ctrl + F, search for
> \"Browse by Category\", you will find it in the right side of a triangle,
> click it. --- Know if it is not a bug, obviously, this is in the
> implementation of JavaScript. In addition, I am not English, which is Google
> from the Chinese to English, using machine translation. Thank you.
> -----以下是汉语--Chinese--- 您好,我是Web developer的一位用户,前几天发现了它的一个bug。
> 1∶打开阿里巴巴的首页http://www.alibaba.com,并等待页面加载完毕。 2∶web
> developer-->Disable->Disabled JavaScript-->All JavaScript 3∶Ctrl+F,搜索"Browse
> by Category",你会发现在它右边有一个三角形,点击它。 ---不知道算不算一个bug,很明显,这里是JavaScript在执行。
> 另外,我英语不好,这是Google从汉语到英语,用机器翻译的。谢谢。
> ---------Google automatic translation---- Hello, I am a user of the Web
> developer, a few days ago, it found a bug. 1: Open the home page Alibaba
> http://www.alibaba.com, and wait for the page loaded. 2: web developer ->
> Disable-> Disabled JavaScript -> All JavaScript 3: Ctrl + F, search for
> \"Browse by Category\", you will find it in the right side of a triangle,
> click it. --- Know if it is not a bug, obviously, this is in the
> implementation of JavaScript. In addition, I am not English, which is Google
> from the Chinese to English, using machine translation. Thank you.
> -----以下是汉语--Chinese--- 您好,我是Web developer的一位用户,前几天发现了它的一个bug。
> 1∶打开阿里巴巴的首页http://www.alibaba.com,并等待页面加载完毕。 2∶web
> developer-->Disable->Disabled JavaScript-->All JavaScript 3∶Ctrl+F,搜索"Browse
> by Category",你会发现在它右边有一个三角形,点击它。 ---不知道算不算一个bug,很明显,这里是JavaScript在执行。
> 另外,我英语不好,这是Google从汉语到英语,用机器翻译的。谢谢。
2008年9月16日星期二
用不同的窗子看不同的风景
中秋三天,家里网也断了3天,够郁闷的。问爱普宽带的客服,却说路由器什么的坏了,正在调整参数,一调就是3天。
现在知道,稳定才是硬道理。
打开邮箱,等到了一封csdn的自动推送邮件。囧
把 超越CSS 翻出来看了下。引用书中一段话:“试图想让使用不同浏览器的访问者获得一致的用户体验,是不现实的想法,且是没有价值的。”。哼哼,紧跟跳出个词“分级体验”。
对,明智的做法。
如果努力尝试在所有目标浏览器获得一致的效果,那么,光漫无边际的hack就够受的。
是的,又听见了:“你的页面IE6不兼容”。有点委屈,为什么要兼容IE6 ?
当然没办法,客户有理由:“我用的是遨游啊,比Firefox还好用!”,很无奈的理由。
现在是2008年9月,我们继续做以兼容IE6为底线的网页。但可以想,这不是未来的趋势。
有必要让客户更新至IE7(等段时间也许就该是IE8了),当然我们要做些东西“诱导”他们。
有次在网吧上网,发现浏览器版本是IE7,当时也有很多网站不兼容,可现在看看,各大网站都开始完美兼容IE8了。企业招聘的时候也会说“我们就要会div+css的人” 。
但在兼容IE7的时候,却没把IE6的Hack习惯扔掉,还弄出了针对IE7的Hack。这不是开发者的错,而是IE6的错,导致我们把ie6的hack恶习惯性到了IE7。
再次引用标题---用不同的窗子看不同的风景。
现在知道,稳定才是硬道理。
打开邮箱,等到了一封csdn的自动推送邮件。囧
把 超越CSS 翻出来看了下。引用书中一段话:“试图想让使用不同浏览器的访问者获得一致的用户体验,是不现实的想法,且是没有价值的。”。哼哼,紧跟跳出个词“分级体验”。
对,明智的做法。
如果努力尝试在所有目标浏览器获得一致的效果,那么,光漫无边际的hack就够受的。
是的,又听见了:“你的页面IE6不兼容”。有点委屈,为什么要兼容IE6 ?
当然没办法,客户有理由:“我用的是遨游啊,比Firefox还好用!”,很无奈的理由。
现在是2008年9月,我们继续做以兼容IE6为底线的网页。但可以想,这不是未来的趋势。
有必要让客户更新至IE7(等段时间也许就该是IE8了),当然我们要做些东西“诱导”他们。
有次在网吧上网,发现浏览器版本是IE7,当时也有很多网站不兼容,可现在看看,各大网站都开始完美兼容IE8了。企业招聘的时候也会说“我们就要会div+css的人” 。
但在兼容IE7的时候,却没把IE6的Hack习惯扔掉,还弄出了针对IE7的Hack。这不是开发者的错,而是IE6的错,导致我们把ie6的hack恶习惯性到了IE7。
再次引用标题---用不同的窗子看不同的风景。
2008年9月12日星期五
清除浮动
我有点执拗,以前听别人说overflow:auto;可以用来清除浮动,我不相信。
今天看到了这篇帖子 CSS 别忘记清除浮动 相信了。
在这之前一直用clear:both;这个来清除浮动。要清除浮动的时候一般是因为上级兄弟标签无法确定自身高度,这个时候我就把它(指上级兄弟标签)也弄成浮动的。不过这样有弊端,导致上级所有的div标签几乎都设置了float。虽然也兼容N个浏览器,但心里总感觉不踏实。
刚才测试了下,感觉overflow:auto;用来清除浮动是个比较好的办法,这样不用float也可以确定自身高度。且下级兄弟标签也不需要使用 clear:both;。
写空标签来清除浮动的方法,总感觉不好。
以前在经典论坛上看到了篇帖子,记不清链接了。
说adobe的首页是这么清除浮动的。
实践出真知,当然最终还要经过N个浏览器的检验。
天天想,不知有着落没 ....
今天看到了这篇帖子 CSS 别忘记清除浮动 相信了。
在这之前一直用clear:both;这个来清除浮动。要清除浮动的时候一般是因为上级兄弟标签无法确定自身高度,这个时候我就把它(指上级兄弟标签)也弄成浮动的。不过这样有弊端,导致上级所有的div标签几乎都设置了float。虽然也兼容N个浏览器,但心里总感觉不踏实。
刚才测试了下,感觉overflow:auto;用来清除浮动是个比较好的办法,这样不用float也可以确定自身高度。且下级兄弟标签也不需要使用 clear:both;。
写空标签来清除浮动的方法,总感觉不好。
以前在经典论坛上看到了篇帖子,记不清链接了。
说adobe的首页是这么清除浮动的。
实践出真知,当然最终还要经过N个浏览器的检验。
天天想,不知有着落没 ....
订阅:
博文 (Atom)