不常见的前端BUG收集

no comments , Tagged : , ,

无聊~别人都发常见的,我就在这记录些平时比较少遇到的BUG吧(不定时更新),以下提到的方法不是唯一解决办法或者一定有效

  • IE6绝对定位层消失

    当相邻标签有浮动可能出现该问题,对绝对定位的层加清除浮动

  • IE6下DD_belatedPNG背景位置偏移

    有时会发现背景图偏移了1px,你+/-1px它还是老样子,+/-2px它就老实的动了2px,解决办法是修改一下背景图(sprite)的位置1px,好像纵横度坐标都是一样是双数或者单数的原因。

  • IE7下正负内外边距实现等高的方法,高度没有以最高列为准

    可能是没有浮动导致。我遇到的就是一边左浮动,右边不浮动,结果高度总以右边的高度为准,加上浮动后问题解决。

HTML5入门-离线存储初探

2 comments , Tagged : , ,

这已不是什么新东西了,也没什么技术含量,只适合新手当作入门,如果您已了解过就没必要往下看了,哈哈!!

两周多前了解了一下并试作了一个DEMO,一直人懒没有把文章整理出来。昨天给自己的要求是今天一定要整理出来,接下来的两周好好看下书,为之后的路作准备。虽然还没确定下来,但还是得先作下准备,多积累点东西。

“离线存储”顾名思义,使得你的web应用可以在用户离线的状况下进行访问。这个技术至少有3个好处:

  • 最重要的一个好处当然是用户可以离线访问你的web应用;
  • 文件已被缓存在本地,使得web页面加载速度有显著提升;
  • 离线应用只加载被修改过的已缓存资源与不缓存的文件,因此也降低了服务器的负载压力

CSS的解析规则

1 comment , Tagged :

对CSS有一定了解的人,应该都知道CSS是从右往左解析的。最近在网上看到一张关于CSS解析规则的图片,挺有趣的,也挺直观的,废话不多说,直接上图。

用css3实现高光渐变边线

no comments , Tagged : ,

皮肤终于搞定,每年春节左右都会换新皮肤,因为这博客也是在09年春节前不久开通的。去年换了两次皮肤,所以今年拖到这段时间才在再制作。这次与之前的皮肤差不多,算是前两个皮肤的合体吧。本来打算用亮点的颜色,但颜色配得不好,也不喜欢,最后还是用回了这种暗暗的色调。依然屏蔽所有IE(IE9还是有点小杯具,所以一样屏蔽)与FF2,测试浏览器chromium12、Firefox 4、Safari 5、Opera 11。

好了,下面进入正题,实现方法与box-shadow原理一样,所以没看过的请先看一下。

我们就直接拿头部的导航来举例说明。因为只有FF才支持border的渐变而且只能是自内向外或者内外向内,所以用border去处理是不靠谱的。背景就可以渐变,所以我们利用背景来作边框的渐变。首先看下面这段样式:

#header .page_item:before{ position:absolute; left:-1px; top:0; width:87px; height:55px; background:-webkit-gradient(linear,0 0,0 100%,from(#1f1f1f),to(#333));background:-moz-linear-gradient(top,#1f1f1f,#333);background:-o-linear-gradient(top,#1f1f1f,#333); content:''; z-index:-1;}

同样是用绝对定位加z-index:-1,记住content属性很重要。但在实际应用中,可能会发现看不到效果,那是因为被有设置背景的父级元素给遮挡了,所以只能视情况把某个父级元素也设置为绝对定位,例如这皮肤,我是对下面这个设置的:

#header nav{ position:absolute; top:0; left:200px; width:510px; text-align:right; z-index:999}

其实用这方法也挺无奈的,而且不是什么布局都能这样弄。不过要提醒的是,上面是针对双边线高光渐变,如果你是单边线,直接用1px宽或高分别放到需要的位置既可

iphone、ipad Web开发小技巧(知识)

6 comments , Tagged : ,

iphone、ipad都水果家的,区别也不是很大(别和我提屏幕!!!),所以放一起不作过多区分,基本都通用。资料都网上收集来的,很多我也还没条件测试,可能有些知识点已经更新了。

如何隐藏iPhone Safari的地址栏

使用meta标签,看一些资料说的,不过我在iphone4下测试没反应,不清楚iphone3是否有效或者是有什么限制。

<meta name="apple-mobile-web-app-capable" content="yes" />

第二个方法就是通过JS处理。原理就是当我们往下滚动时,地址栏会往上收起,所以我们重围一下默认位置就可以了。也因为是使用系统自身的特性,当内容小于可视区域时(没有滚动条),地址栏是不能隐藏的

window.addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){
window.scrollTo(0,1);
}

不同的方向对应不同的样式表

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
</link><link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
</link>