Css | 飞鱼 ^_^ 浆抱罗斯‘s blog

你正在浏览的是 css 标签

25 Sep 2010

IE8 不定尺寸图片垂直居中引起的 bug

2010年9月25日 21:49 pm - 慢性创可贴 - css - ie8

0 ~o~

bug描述: 容器 display: table-cell 内部img max-width失效

今天要做一个图片尺寸不定垂直居中的效果.
状况如下:
容器: 为200*200
图片: 尺寸不定, 会比容器小,或者会比容器大.

所以就想到了用max-width属性来实现,(当然ie6 需要用js 替代实现, 因为max-width ie6不吃)

参考蓝色的代码: inline-block 发

http://bbs.blueidea.com/thread-2666987-1-9.html

然后就发现了这个bug , google 了一下果然有 http://goo.gl/Si9z

解决办法

IE下使用hack 避开display:table-cell 属性,打成 inline-block,用行高法来实现.

22 Sep 2010

<img class="alignnone size-full wp-image-935" title="blog20101922" src="http://www.qilei.org/wp-content/uploads/2010/09/blog20101922.jpg" alt="" width="600" height="200" /> 
配图:最近 太宠 小3(mac book pro 374)了,大老婆抖去了, 闹脾气起不来了.
看这篇文章前可以先 去看下下面这篇文章. <a href="http://www.zhangxinxu.com/wordpress/?p=1098">精简高效的CSS命名准则/方法</a> 
当一个css 代码年龄超过 2年的淫都会想着怎样去偷懒,去节省那些重复的样式代码. 
于是就出现了很多流派. (以下名字都湿我YY, 哥只是 非专业的) 
比如 
直肠流: 写css 属性不换行. e.g.<code>.class{color:red; }</code> 
短线流: 写css 喜欢用短词用中横线链接 e.g. <code>.home-notice-tit{...}</code> 
and so on.. 
当然也有上面文章里的 大牛 使用分离 流 e.g. <code>.pl4{padding-left:4px }</code> 
因为这样的分离流, 咱们 <a href="http://h-yue.com">星罗 </a>发飙了, 发扬愤青应有的愤怒. 
的确, .pl4 .pl10 这样的做法 飞鱼我也是很鄙视的, 丫 跟内联样式 有啥区别, 
如评论所说的, 这样写无非是再写天书, 缺点毛多. 
就像星罗 说的一样,因为尝试过了,之后发现大的问题, 然后放弃了.
<h3>过分进行属性分离的后果</h3>
<ul>
<li>1.可读性: 1星, 还需要别人是很努力的记下你的缩写表.</li>
<li>2.可维护性: 1星, 曾经有个需求让哥去掉, 某tit(上左右1px border),的boder,然后给tit加 一个背景, 代码类似: bt1 bl1 br1 .丫的, 搜了一下有他娘的40哥文件上百处. </li>
<li>3.CSS Sprites:1星, 用CSS Sprites 的时候,会很囧rz ,用了就知道</li>
<li>4.不可压缩及分布式调用: 随着需求越来越复杂, 公用样式包会越来越大, 又不能切分, 对于多样化的页面将是噩梦,会遇到 只有丁点样式,而不得不调用庞大样式得尴尬情况</li>
<li>5. 还有好多…</li>
</ul>
以上只是过分 属性分离的后果. 
但是上文中张鑫旭的文章 中也有好的部分, 比如他的 oocss 对象式css 书写规则, 
这种对象式的书写方法也是我慢慢积累出来的一种方法. 
oocss 的 书写带来的效率及性能可以看这里: <a href="http://www.zhangxinxu.com/wordpress/?p=1045">翻译:同CSS技术及其CSS性能</a> 
也可以查看我之前写的 <a href="http://www.qilei.org/201008/addon-class-do-not-run-on-ie-6/">又见IE6吐槽~ 并行结构式class引起的bug</a>
好了回归主题, 说说我对 OOCSS 对象式css 书写的理解,还有心得. 
 <a href="http://qilei.org/201009/talking-about-the-oocss-for-web-site/#more-934" class="more-link">阅读全部>></a>

16 Aug 2010

又见IE6吐槽~ 并行结构式class引起的bug

2010年8月16日 20:29 pm - 代码浅谈 - bug - css - ie6

16 feet

1 May 2010

伸缩自如 – 绝对定位的自适应能力

2010年5月1日 22:30 pm - 代码浅谈 - css

7 feet

28 Nov 2009

发现图片上的map的链接不能是target=”_blank”

2009年11月28日 0:36 am - 慢性创可贴 - css

1 foot

Page 2 of 5123 4 5

Who am I ?

飞鱼，男，浙江人士。
非专业前端、交互设计师。
目前在企鹅村通宵打酱油

新鲜的肉

那些朋友

大猫不是猫，是妖怪
葉子家园小MM
小峰家园
小豪家园滴前端
引子歌词写得很棒
落落印钱的
丁丁淘宝
辉辉即将毕业滴网工
布拉格 Evance | 花花
笨笨开过淘宝店的前端哥哥
毛毛研究生大姐头~
余果 ISUX | 给力切图仔
陆续增加中...^_^

竟然忘了我？提醒一下

那些牛×的人

白鸦喜欢他的想法
Rokey 喜欢他的设计质感
跑调麦霸喜欢他的设计风格
韩寒喜欢他的职业

相信六度定理，有朝一日能认识他们。

飞鱼 ^_^ 浆抱罗斯‘s blog

IE8 不定尺寸图片垂直居中引起的 bug

解决办法

偏激害死人 – 再谈 OOCSS – 对象式书写规则

又见IE6吐槽~ 并行结构式class引起的bug

伸缩自如 – 绝对定位的自适应能力

发现图片上的map的链接不能是target=”_blank”

Who am I ?

分类

最新在啃

新鲜的肉

最新评论

那些朋友

那些牛×的人

飞鱼 ^_^ 浆抱罗斯‘s blog

IE8 不定尺寸图片垂直居中引起的 bug

解决办法

偏激害死人 – 再谈 OOCSS – 对象式书写规则

又见IE6吐槽~ 并行结构式class引起的bug

伸缩自如 – 绝对定位的自适应能力

发现 图片上的map的链接 不能是target=”_blank”

Who am I ?

分类

最新在啃

新鲜的肉

最新评论

那些朋友

那些牛×的人

发现图片上的map的链接不能是target=”_blank”