html+css – WEB前端开发- 专注前端开发，关注用户体验

日志分类：html+css

【IE6的疯狂之一】IE6中奇数宽高的BUG

时间：2009年04月01日作者：愚人码头查看次数:12,507 views评论次数：14

IE6真是太疯狂了。今天由于项目需要做了这么一个布局：一个外部的相对定位div，内部一个绝对定位的div（right:0），

如图：

可是在IE6下查看，却变成了right:1px的效果了：

IE6还有奇数宽高的bug，解决方案就是将外部相对定位的div宽度改成偶数。高度也是一样的
查看源码：

CSS代码:

#out {
width: 609px;/*这里宽度为奇数，bug就出现了！！改成偶数就OK了*/
height: 300px;
position: relative;
background:#FF0000;
color:#FFF;
}
#inn {
width: 200px;
height: 250px;
position: absolute;
top: 0px;
right: 0px;
background:#000000;
}

XML/HTML代码:

<div id=“out”>
<div id=“inn”>此处为内部绝对定位的 DIV</div>
</div>

标签：IE6 BUG分类：html+css

css自定义导航、按钮样式

时间：2009年04月01日作者：愚人码头查看次数:15,717 views评论次数：7

在网上看到一个用css自定义“按钮”样式，说是按钮其实是链接，用链接模拟的按钮，这样我们的按钮就可以很丰富了。我们可以用这个来做网站导航，连接，按钮等等。
不过方式有一个很不好的地方就是<a>标签里套了一个空的<span>,从html语义化的角度来说，这个是不应该的。
先看看效果吧：

一.要使用的图片,如图：如果你想修改颜色，可以下载PSD：sliding-door-psd

二.实现原理，如图：继续阅读：css自定义导航、按钮样式»

标签：buttom,css分类：html+css

Internet Explorer 8 兼容性模式

时间：2009年03月31日作者：愚人码头查看次数:4,297 views评论次数：0

Windows Internet Explorer 8 支持多种兼容性模式，它们可启用不同的受支持的功能，并影响内容的呈现方式。例如，使某个页面用ie7模式呈现，

要为网页指定文本模式，请使用meat 元素，以在该网页中包含 X-UA-Compatible http-equiv标头。以下示例指定了 EmulateIE7 模式兼容性。

具体请参考：《未来兼容性中的 META 标记和锁定》

标签：html,IE8,meta分类：html+css

CSS参考手册

时间：2009年03月29日作者：愚人码头查看次数:5,646 views评论次数：5

在线CSS2.1参考手册（苏小雨版）：http://www.css88.com/book/css20/

CSS2.1参考手册（苏小雨版）chm版下载：http://www.css88.com/book/css20/css20.rar

在线CSS2.1参考手册（css88.com版）：http://www.css88.com/book/css/

CSS2.1参考手册（css88.com版）chm版下载：http://www.css88.com/book/css/css2.rar

在线CSS2.1参考手册（W3C汉化版）：http://www.css88.com/book/css2/cover.html

标签：css分类：html+css

彻底了解css中的长度单位

时间：2009年03月28日作者：愚人码头查看次数:9,293 views评论次数：18

我们在写css的时候最常用的长度单位是px（像素），经常看到的还有em，pt等等，其实css中的长度单位一共有8个，分别是px，em，pt，ex，pc，in，mm，cm；

px：像素（Pixel）,相对于设备的长度单位，像素是相对于显示器屏幕分辨率而言的。
譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。
em：相对长度单位。相对于当前对象内文本的字体尺寸。
如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
pt：点（Point），绝对长度单位。
ex：相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
pc：派卡（Pica），绝对长度单位。相当于我国新四号铅字的尺寸。
in：英寸（Inch），绝对长度单位。
mm：毫米（Millimeter），绝对长度单位。
cm：厘米（Centimeter），绝对长度单位。

其中：1in = 2.54cm = 25.4 mm = 72pt = 6pc ；

容器的大小我们经常用px做单位，大家都没什么异议，

字体大小（font-size）很多国内的人（包括我）使用px做单位，其实用px做字体单位唯一的致命缺点就是在IE下无法用浏览器字体缩放的功能。如图。或者以前的按住Ctrl+滚动鼠标的中间的滚轮。

继续阅读：彻底了解css中的长度单位»

标签：css分类：html+css

谈谈CSS Sprites(css精灵)

时间：2009年03月26日作者：愚人码头查看次数:10,433 views评论次数：4

CSS Sprites在国内很多人叫css精灵，其实这个技术不新鲜，这个技术老到什么程度呢，我不敢确定，但是我看到最早的关于CSS Sprites是在Dave Shea的《CSS Sprites: Image Slicing’s Kiss of Death》，时间是March 05, 2004 ，整整5年了，那时我还没参加工作呢？

这个技巧已经广泛的应用到现在的页面的前端开发中，甚至YUI将他定为《提高网页效率的14条准则》的第一条准则“Make Fewer HTTP Requests” ，可见这个技术的重要性，也正是YUI的推荐
使这个CSS技巧得到了广泛的推广和应用。

先来看个最简单的DEMO：
这是背景图片

这是一个简单的CSS Sprites的demo:

XML/HTML代码

<div style=“float:left; width:120px; padding-left:20px; background:url(ico.png) left top no-repeat”>这里显示红叉</div>
<div style=“float:left; width:120px; padding-left:20px; background:url(ico.png) left -32px no-repeat”>这里显示绿勾</div>
<div style=“float:left; width:120px; padding-left:20px; background-image:url(ico.png); background-position:left top; background-repeat:no-repeat”>这里显示红叉</div>
<div style=“float:left; width:120px; padding-left:20px; background-image:url(ico.png); background-position:0 -32px; background-repeat:no-repeat”>这里显示绿勾</div>

看看页面中的显示！

继续阅读：谈谈CSS Sprites(css精灵)»

标签：css,css Sprites分类：html+css

页面中css调试和问题解决的一些经验总结

时间：2009年03月26日作者：愚人码头查看次数:5,807 views评论次数：12

在前端开发中经常会碰到浏览器兼容性问题、css2各个属性被各个浏览器支持的问题，css继承，css叠加等等，我们经常因为这些而需要调试页面中css。
以下只是我个人的一些经验总结，如果有不合适请留言斧正，欢迎补充。

一、为什么页面会出现种种的bug

1.浏览器的本身对CSS支持BUG：
IE6有一堆BUG，具体可以参考一下《IE6 BUG大全》http://www.css88.com/archives/579；
FF需要注意清除浮动；
还有浏览器对css2各个属性的支持问题，大家需要了解浏览器对css2各个属性的支持情况；

2.直接书写错误，由于自己在写css时候的粗心造成的BUG

比如将 .ask-lable{width: 934px;height:94px; padding-top:43px; margin:0 auto;}
中的“{}”写成了中文状态的“{}”,或者溜掉了结束的“}”；margin:0 auto;中的冒号和封号，也会经常被写成中文的，还有0（零）经常会被写成o（英文字母o）；width: 934px;中的px经常会被忘掉，还有以下缩写的格式等等；
3.在页面编码不统一的情况下，经常会碰到，样式写着写着，在ie6下页面就乱掉了，这是IE6的bug；
4.没搞清楚html的块状元素和内联元素，css的某些属性对内联元素不起作用，

可以参阅：html中的块元素(block element)和内联元素(inline element) http://www.css88.com/archives/646

比如：<span style=”text-align:right;margin:30px; padding:30px; border:#F00 2px solid”>span是内联元素</span>；

比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。也可以把块元素div加上display:inline，让他显示为内联元素。
5.css继承，css叠加也可能造成一些bug，这里要特别注意一下重置样式（css reset）中和公用样式（public）的继承。

继续阅读：页面中css调试和问题解决的一些经验总结»

标签：css分类：html+css

【转载】CSS修饰图片

时间：2009年03月26日作者：愚人码头查看次数:4,433 views评论次数：1

有人翻译了《css decorative gallery》这篇文章，这写也是我们前端开发的时候经常用到的一些技巧。感谢翻译者，感谢webdesignerwall

这篇文章主要介绍了用简单的 CSS 技巧来装饰图片的技巧，方法很简单，只需要用一个 span 标签并对它应用背景图，即可以做出非常漂亮但不失灵活的效果。而且作者还提供了 20 多种经过精心设计的演示，从简单的装饰一个小图片到应用圆角的边框，再到半透明的蒙版……不废话来，先来看演示：

View Demo (在线演示） and Download（下载）

作者给出了这样做的几点理由：

省时方便：不用再用 PhotoShop 去对每张图片进行处理
完好地保留了原始图片：因为是用 CSS 对图片进行样式处理，所以不用对图片进行任何修改，保留了最原始的完整的图片。
非常的灵活：你完全可以通过只修改 CSS 而使图片的效果变成另外一个样子。
应用广泛：可以在任何地方，对任意尺寸的图片进行装饰。
兼容性强：在大部分浏览器上测试通过，包括 (Firefox, Safari, Opera, 甚至是 IE6 )。

基本思路：

继续阅读：【转载】CSS修饰图片»

标签：css,图片分类：html+css

一个关于透明度继承的问题

时间：2009年03月26日作者：愚人码头查看次数:29,812 views评论次数：19

取这个标题我很胆怯，因为我始终不敢确定这个到底是不是透明度的继承！但是我没相到更好的标题，那也只能用这个比较形象的标题了。

在前端开发的时候，经常用到板块背景的透明度，

例如这样的结构：

XML/HTML代码

<div class=“div1″>这里文字图片都带透明度了
<div class=“div2″>图片</div>
</div>

样式

CSS代码

body {
background-image: url(http://www.css88.com/demo/jQuery/blockSlide/2009-02-04_105247.png);
background-repeat: repeat;
}
.div1{ width:200px; height:200px; background:#FFFFFF;filter:alpha(opacity=70);opacity:0.7;}
.div2{ width:100px; height:100px; background: url(http://www.css88.com/images/testbok.png)}