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

你正在浏览的是 css 标签

2 Feb 2012

position:absolute 的一些兼容心得。

2012年2月2日 10:09 am - 慢性创可贴 - css

0 ~o~

有的时候需要特殊布局的时候需要用到绝对定位。
绝对定位在大部分情况下表现得非常好。
但如果设置不当，会引起一些特殊浏览器如IE 6 7 的一些兼容性bug

1. reflow bug ，
内部有绝对定位的时候，务必要确保外层 relative dom 的盒模型成型：就是类似zoom:1 ，是否有高度，让浏览器知道节点dom有比较明确的盒模型。就不会引起reflow bug 或者会引起定位不准的问题。
2. 定位属性避免单一
position:absolute 的时候确保定位属性(top right bottom left) 至少两项~ 如果只设置一项 left 在IE7下有些时候会引起定位不准的问题
3. 定位 1 像素偏移
IE6下，设置 right 或者 bottom值的时候避免父容器(relative)的高宽是奇数，否则会引起1像素误差偏移bug

19 Nov 2011

IE6 reflow bug 经验因素收集

2011年11月19日 10:49 am - 慢性创可贴 - css

0 ~o~

11 Oct 2011

zoom:1 引起的bug 一则

2011年10月11日 2:09 am - 慢性创可贴 - css

0 ~o~

7 Sep 2011

<p><img src="http://qilei.org/wp-content/uploads/2011/09/0905.jpg" alt="" title="vertical-align" width="600" height="240" class="alignnone size-full wp-image-1300" /></p>
<p>最近接触了许多 关于图片文字水平对齐的需求，然后发现如果单单将vertical-align 设置为middle 的话，不同浏览器下居中对齐的位置有偏移，让人好不蛋疼~ =，=<br />
网上搜了下好像也没有搜到相关的分析，大部分都是垂直居中的案例<br />
于是专门针对vertical-align 做了次分析，功夫不负有心人，分析结果还是挺好玩的，对vertical-align 又有了一次深入的了解。给力~~~</p>
<p>demo 传送门： <a href="http://qilei.org/demo/vertical-align/" target="_blank">vertical-align 各属性分析</a> <em>有错误欢迎回复纠正哦 ^__^</em></p>
<p>一些心得体会：</p>
<h3>vertical-align 定义</h3>
<p>最初我认为的vertical-align 解释 跟text-align 一样，是容器内部的非block 元素居中对齐，但~~  <strong>我理解错了</strong><br />
从w3c 官方对 vertical-align 各属性的解释来看，vertical-align 是定义当前节点，跟外围内容的对齐方式，跟text-align 的解释是不一样的。</p>
<h3>vertical-align:baseline 基线对齐</h3>
<p>分析所得，发现baseline不是在<strong>中文字</strong>的可见部分最下方，而是在<strong>英文字</strong>的可见部分最下方。<br />
然后发现图片对齐的时候是以图片的最下方同相邻文字的 baseline 对齐。<em>一直觉得为啥图片下方会有4像素的空白，现在明白了</em></p>
<h3>不同字体会有不同效果</h3>
<p>我这个demo 用的Tahoma 字体，发现如果使用类似 Yahei 等中文字体，在IE低版本下会有出现一些奇怪的现象，详细可以看demo。</p>
<h3>vertical-align 最好不要混用</h3>
<p>从定义来理解，就发现这个vertical-align 最好不要混用。因为本身不同属性会产生各种各样的兼容问题，如果混用，估计会出现更复杂的现象。虽然我也没有深入研究，但我觉得混用不太靠谱。</p>
<h3>vertical-align: px 定位最稳定</h3>
<p>这个属性一直都没怎么用，原先一直用middle 来实现水平对齐，在一次偶尔的项目代码里发现的。<br />
相对定位是相对于baseline的偏差定位，负值代表图片相对baseline往下移。<br />
在研究中发现使用相对定位兼容性最好，<em>只有IE7会有2px的偏差，但基本可以无视，因为目前IE7的用户可以忽略不计</em>。<br />
不过这种方法也不是万能的，<br />
因为是相对于baseline的相对定位，如果文字变大后，图片的对齐位置 看起来就不会跟着移动区别于middle属性，不过个人觉得这样的情况出现概率不大，并且字大了再针对调整也没问题。<br />
另外图片大小不一样大相应的负值也不相同，<em>详细见demo</em>。</p>
<h3>高潮：vertical-align 最佳兼容方案</h3>
<p>前面说了这次研究没有白费，个人推荐的vertical-align 用法如下：<br />
1. 尽量保持主内容的 vertical-align 是baseline 即默认的，不要把vertical-align 当text-align 来理解使用。<br />
2. 针对 内部需要调整位置的 图片等 进行 px 定位。<br />
优点：保证外围的vertical-align 是默认值，不产生混用现象。<br />
缺点：针对不同尺寸的图片要针对进行定位，不过一般ico 大小差不多大，可以统一调整。</p>
<p>下一步研究方向：表单元素的vertical-align: px 是否同样适用 ？</p>

12 Jun 2011

css心得之善用 position:relative

2011年6月12日 1:35 am - 代码浅谈 - css

18 feet

Page 1 of 512 3 4 5

Who am I ?

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

新鲜的肉

那些朋友

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

竟然忘了我？提醒一下

那些牛×的人

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

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

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

position:absolute 的一些兼容心得。

IE6 reflow bug 经验因素收集

zoom:1 引起的bug 一则

vertical-align 图片文字水平对齐分析

css心得之善用 position:relative

Who am I ?

分类

最新在啃

新鲜的肉

最新评论

那些朋友

那些牛×的人