当前位置:主页 > 网页教程 > 网页制作 > div css > 内容欢迎大家投稿

css设计的6个注意事项

时间:2009-10-02 17:03来源:未知 作者:大宝库 点击:读取中
阅读工具:字体:

这里跟大家分享几点很小的css造成问题,都是不容易察觉的,希望大家在设计div+css模板的时候注意。

1.ie在img标签后面有空格的bug
其实这个应该是很常见的一个bug了,先让大家看看问题页面!
http://www.23live.cn/html/bug/IE_bug.html

大家可以打开这个页面的源代码,就会发现第一图像的img标签跟div的结束标签直接有空隙,然而第二个是没有的,这个就是ie的img标签bug,请大家写模板的时候注意这点,虽然是小小的几个像素,但是实在不咋好看。

2.ie6双倍边距及火狐float问题bug下面是问题展示页面
http://www.23live.cn/html/bug/float.html
在ie6下,div浮动的时候,会有一个双倍边距的bug,只要添加一个display:inline就可以解决,具体本人也了解不深。
火狐的那个也不算是bug,应该是按照标准解析了,不过不是很适合我们的思维。火狐下最外层的div没有完整的包含内部的div,解决办法上面的文件的源代码里面的注释中写到了。大家可以看看代码。

3.火狐背景图片消失bug
这个问题是我无意中发现的,很是奇怪,这个应该确信是火狐的bug了。
事情出现的原因是这样的,当你设置了背景图片的时候,ie显示正常,但是火狐却没有显示,如果网友很大,看到的效果是:背景图片在火狐中一闪而过,而不是没有显示。

解决方法也是无意中发现的,只要把css中背景图片的地址改为完整网址,如12.jpg,改为www.23live.cn/12.jpg就可以了。因为在火狐中是一闪而过,而使用完整网址的话,浏览器就会去重新解析,下载图片,这样产生了一定的延时,一闪而过的图片得以显示。

4.说说居中的问题。
这样有一种比较不错的居中方案,css实现网页整体居中。相信很多朋友的代码是使用的这个,其实这个代码是有点问题的,就是不能在使用相对定位去定位一个标签了,如果使用了相对定位后,就会在改变浏览器窗口大小的时候,出现错位的问题。

5.ie7一个奇怪的乱码的bug
此bug来自sincs的发现,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>标题</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

这样的写法竟然在IE7下无法显示,查看源文件是正常输出了的,可在Firefox下是正常显示。
应该是title的里面的中文导致的,因为之前没有文件告诉浏览是什么编码。
解决方法也很简单,就是把下面带有编码的meta移动的前面就好了。

6.css文件中文注释bug
这个是ie6下的bug,单独的css文件注释,如果第一个注释里面有中文,那么这个样式将不会被引用。这个大家注意就好了,避免了就没有问题了。

(责任编辑:大宝库)


------分隔线----------------------------
推荐内容
赞助商链接
赞助商链接