随笔分类 -  HTML/CSS

1 2 下一页
IE6 不支持以下划线开始的类名
摘要：IE6居然不支持以下划线开始的类名...如下代码：[代码] 阅读全文
posted @ 2009-11-01 14:37 木头wood 阅读(392) 评论(0) 推荐(0)
图片的居中显示
摘要：图片的垂直居中显示的问题，经常会遇到。结构： [代码]样式：[代码]如果给img套个a标签，也是可以垂直居中的，不能声明a的任何属性。 阅读全文
posted @ 2009-10-29 16:32 木头wood 阅读(220) 评论(0) 推荐(0)
IE的a的bug
摘要：[代码]在IE下：a无论怎么设置都不能覆盖img，在img范围内，没有链接。将img换成div标签也是一样，如下代码：[代码]最后的解决办法：给a加了个1px的透明背景（真无语啊！—_—|）。 阅读全文
posted @ 2009-10-29 12:44 木头wood 阅读(221) 评论(0) 推荐(0)
IE6/7 浮动li bug
摘要：如下代码：[代码]在IE6/7下第二行会出现问题：如图 1.jpg (45.48 KB) 2009-10-20 10:15 但是给li加个高度，问题就解决了。这是为什么呢？ bridostudio：IE6,7 的中英混排文字渲染问题。给 li 或其祖先元素设置合理的行高也可以 ，或者设置宋体。 阅读全文
posted @ 2009-10-20 16:50 木头wood 阅读(976) 评论(0) 推荐(0)
字体中的引号
摘要：[代码]你可能已经注意到h1的样式出现了引号。只有当一个字体名中有一个或多个空格，或者如果字体名中包含#、$之类的符号，才需要在font-family声明中加引号。如果没有引号，浏览器可能忽略这个特定的字体名。还有一种加引号的情况：就是关键字匹配的字体名。例：[代码]就是匹配名为“Cursiv”的字体。 阅读全文
posted @ 2009-10-11 12:54 木头wood 阅读(468) 评论(0) 推荐(0)
图片的边框
摘要：[代码]CSS：[代码]width和height根据需要来设置。边框的一些样式：下载 阅读全文
posted @ 2009-10-06 14:49 木头wood 阅读(199) 评论(0) 推荐(0)
IE6/7的text-indent与text-align的bug
摘要：[代码]1.在IE6/7下，button可以随着text-indent的值不同而移动，FF和IE8则不会！ 2.当设置button的displa:block;时，设置其父元素的text-align:center;，IE6/7的button会水平居中，真奇怪啊！ 阅读全文
posted @ 2009-09-27 12:40 木头wood 阅读(1735) 评论(0) 推荐(0)
li float的一个bug
摘要：[代码]在IE6/7下，第5个li排在了右边，但是应该在左边的，左边出现了一段空白。但是将第5个li的margin-left设置为负值，它直接到上一个那里去了，而没有去占领前面的空白。后有人解决此问题，1.可以给li设个高度2.字体原因，设置宋体也可以解决。[代码]Code highlighting produced by Actipro CodeHighlighter (freeware)htt... 阅读全文
posted @ 2009-09-20 15:30 木头wood 阅读(221) 评论(0) 推荐(0)
3px bug
摘要：在层里只有一个img元素时，会出现img下面与层的3px空白。[代码]网上有很多这个bug的解决办法，但是都没给为什么会出现这个bug。div是一个块元素，img是一个行内替换元素。img默认是放置在基线上的。基线：一图顶千言啊。所以img是在基线上，下面有3px的空白。认识到这个本质以后，就可以轻易的解决问题了。1.img元素生成行内框，设置img的display:block，img将为块元素。... 阅读全文
posted @ 2009-09-09 22:58 木头wood 阅读(212) 评论(0) 推荐(0)
前景色 背景 边框
摘要：前景色：color。color对border的影响：[代码]可以看到p边框的颜色是和color的颜色是一样的。　　背景：元素的背景区包含前景之下知道边框外边界的所有空间，包含内容框、内边距，且延伸到边框。如下代码：[代码]可见，在IE6、7，背景没有延伸到border之下。 阅读全文
posted @ 2009-09-06 14:55 木头wood 阅读(299) 评论(0) 推荐(1)
IE6 的 hover 伪类 bug
摘要：如下代码：[代码]在IE6下，当hover时，不显示span元素。解决这个问题：设置具体的a:hover{background:red;}(border:0也行！)；[代码]同样情况，当a的直接子元素是img时，在IE6下，img在显示后就消失不了，不过可以给img加个容器就可以解决。 阅读全文
posted @ 2009-09-06 10:52 木头wood 阅读(409) 评论(0) 推荐(0)
line-height的继承
摘要：看了玉伯的博客里关于line-height的一篇文章，http://lifesinger.org/blog/2009/08/line-height/。平时经常见到的line-height竟包含很多鲜为人知的事。line-height的值可以为：<length>|<percentage>|<number>| noromal | inherit。em，px和百分数都... 阅读全文
posted @ 2009-09-02 23:59 木头wood 阅读(414) 评论(0) 推荐(1)
word-spacing
摘要：如上图，对齐的问题，有点郁闷。刚开始只能声明text-align属性来进行对齐。但是各行的字数又不一样，试了下word-spacing，但是不起作用。word-spacing这个属性对中文没用，不过在中文之间加个空格就生效了。可能老外觉得两词之间没空格就是一个词：helloworld，你好。试验了下letter-spacing，生效，说明浏览器把没空格的中文当成字母了。word-spacing用于... 阅读全文
posted @ 2009-08-31 18:15 木头wood 阅读(2716) 评论(1) 推荐(0)
css的一些注意
摘要：1.display:inline-block是CSS2.1中新增的。对块级元素声明此属性，FF3.5和IE8可以实现，但是IE8--不行。但是奇怪的是，对行内元素声明此属性，上述几个浏览器全部生效。2.如果块级元素有上、下内边距或者有上、下边框，其高度则是从其最高子元素的上外边距边界到其最低子元素的下外边距边界之间的距离。[代码] 阅读全文
posted @ 2009-08-30 15:26 木头wood 阅读(194) 评论(0) 推荐(0)
预防水平跳动
摘要：当你的页面的高度达不到火狐浏览器的最小高度时，她不会出现右边的滚动条，所以当你从一个没有滚动条的页面跳到一个有滚动条的页面时，会产生水平跳动的感觉。在IE下是没有这种现象的，因为她自动加了。　　解决这个问题,在CSS中加入如下代码就可：[代码] 阅读全文
posted @ 2009-08-11 14:58 木头wood 阅读(204) 评论(0) 推荐(0)
对网站的服务条款的总结
摘要：当用户注册时，有一个内容是服务条款或者服务协议。自己是用textarea设置的，有同学用div也实现了。先看代码：一.[代码]（一般服务条款都很长，内容高度大于设置的宽度时出现滚动条，不用担心。）二. [代码](这样也可以达到相同的效果。)个人觉得2个都可以用，偏向于第二个方案。上网查了下几个网站的这块：1.阿里巴巴中国站：用一个链接+js，弹出一个框；2.百度有啊：用的第一个方案；3.淘宝：用的... 阅读全文
posted @ 2009-06-28 16:37 木头wood 阅读(924) 评论(0) 推荐(0)
一些注意
摘要：1.内联元素距离上一行元素的距离由行高决定。2.IE6的双边距问题。3.浮动元素，应声明其宽度（若没声明，则其宽度趋向于零，即压缩到内容能承受的最小宽度）。4.IE的条件注释（<!--[if IE]>...<![endif]-->等等）使用的是HTML的注释结构，因此它们只能使用在HTML文档里，而不能在CSS文件中使用。 阅读全文
posted @ 2009-06-25 13:03 木头wood 阅读(106) 评论(0) 推荐(0)
IE6 position
摘要：最近在试验一个圆角，把四个角都切下来，然后用绝对定位，在FF3和IE7下都显示正常，但是IE6下，下面的2个圆角显示有问题，高了11px，上网搜索也没有相关的东西找到，只好用hack解决（我不太喜欢用hack）。但是IE6的绝对定位是没什么问题的，百思不解啊。希望高手请教啊。 ie6（没用hack的时候）: 代码如下： [代码] 刚刚在逛的时候，发现KDUED的评论框很像我现在做的这个圆角。看了下... 阅读全文
posted @ 2009-06-25 12:28 木头wood 阅读(191) 评论(0) 推荐(0)
IEbug：层里的图片下有3px空隙
摘要：代码：[代码]图片的下面会产生几个像素的间隙。解决这个bug有几个办法：1.将图片设置为[代码]2.可以定义父容器的字体大小为零[代码]3.可以定义[代码] 也可以参见http://bbs.blueidea.com/archiver/tid-2923803.html 阅读全文
posted @ 2009-06-23 16:33 木头wood 阅读(463) 评论(0) 推荐(0)
去掉点击链接时的虚线框
摘要：一张大图里有个链接，当点击时会出现虚线框，我自己看着都有点不爽啊，更何况用户呢？其实以前也遇到过这个问题，后来一位牛人对说我：自己都不满意，别人怎么会满意呢？我一直牢记在心，很感谢这位牛人。今天也遇到这个问题，上网查了下。一、可以分别设置，在firefox中就比较容易了，直接设置 [代码]在IE中，可以使用IE专有属性hidefocus,firefox不认识[代码]二、[代码] 阅读全文
posted @ 2009-06-19 13:31 木头wood 阅读(325) 评论(0) 推荐(0)

1 2 下一页