沧海依粟 @ 2010-04-23 21:59:00 | 类归于： CSS |
0 条评论 | 115次阅读
今天又遇到了一个很纠结的问题. 在IE7下, 页面莫名其妙的多了个横向滚动条. 使用开发工具查看是否被哪个该死的元素撑开了, 没有发现异常. 于是只能注释html代码, 定位到引起问题元素, 该元素的样式如下:
.style {
position: absolute;
right: 10px;
bottom: 0px;
color: #666666;
font-size: 13px;
font-style: italic;
}
继续跟进, 在禁用 right 后, 滚动条消失. 想不通 right 属性会对布局产生啥影响, 于是 google 之, 找到这篇文章:http://www.brunildo.org/test/ie7_hscroll.html. 原来又是一个IE7美妙的Bug.
在IE7下, 如果一个没有设置宽度的元素被设置成居右(如设置 right, float:right, text-align:right等属性), 那当它的子元素的位置超出父元素的范围后, IE7就会出现奇怪的横向滚动条.注意, 这里是超过, 而并不将父元素撑开. 如设置属性:margin-left: –1px, 或者像我那样, 将font-style设置成了 italic.
解决办法, 给居右的元素加上 overflow: auto 就好了.
永久链接：http://www.GreatSu.cn/?p=406
沧海依粟 @ 2010-04-17 20:16:35 | 类归于： CSS |
0 条评论 | 194次阅读
呵呵, 不知道现在纠结这个问题会不会太晚了.
如果我们想把某个元素固定在屏幕的某个位置, 我们首先想到的肯定是将该元素的 position 属性设置为 fixed, 然后再设置 top, left 等关于坐标的属性. 在 IE6 以上及其它对标准支持比较完美的浏览器上, 这样做就已经能完美达到我们的要求了, 但是 IE6 却不鸟这个值, 咋办? 网上有很多解决办法. 如使用 js 动态的调整位置, 也可以使用 IE 特有的 expression 属性(传说IE8已经不支持鸟).
使用 js 很容易解决此问题, 但是麻烦(其实也不麻烦, 主要还是我懒); 使用 expression 麻烦倒不是很麻烦, 但是有严重的性能问题. 要是只需要使用 CSS 就能解决该问题, 那就完美了. 方法总是有的: http://dancewithnet.com/2007/04/19/cross-brower-css-fixed-position/给了我们趋于完美的解决方案. 代码如下:
点击这里阅读全文…
永久链接：http://www.GreatSu.cn/?p=400
沧海依粟 @ 2007-09-01 22:53:13 | 类归于： CSS |
5 条评论 | 1,800次阅读
今天到IE6下查看了我做得一个WordPress皮肤,发现页面有点变型,而IE7和Firefox却没有任何问题.找了小半天,才明白原来是IE6和IE7,Firefox对Padding的渲染方式不一样(太久没有做页面了,有点小辛苦的说),想了想用 !important 来hack,可是有个小问题,就是IE7现在已经能够对!important进行正式的解释了.而我,只是想对IE6进行特别的样式设置.
试了很久,没有成功,只好求助于Google.发现如下一篇文章:http://bbs.bo-blog.com/viewthread.php?tid=4199.文中提到了如下方法:
#menu { padding-right: 150px }/* Moz Firefox */
* html #menu { padding-right: 50px; } /* IE6 */
*+html #menu { padding-right: 150px; }/* IE7*/
第一行是对针对 Moz Firefox 的设置(其实是针对所有浏览器的设置),第二行是针对IE6的设置,也就是说这一行只有IE6才能理解,最后一行是对IE7的设置.这样,我们就可以针对不同的浏览器,设置不同的样式了,哎,避免浏览器版本不同给我们造成的麻烦:)
希望Web标准快点普及,这样做Web程序也不用这么辛苦啊.
永久链接：http://www.GreatSu.cn/?p=23