解决IE6,IE7的float元素宽度过长超过 折行换行问题
Posted by admin on 2010年09月8日
0 comments
style中设置了float的元素，在IE6和IE7中，靠近边界时如果宽度超过了其中的内容可能会折行， 而不是换行
解决办法 对设置float的元素添加white-space:nowrap; 设置
gmail 邮件中css无效style无效background image背景图片无效不显示的解决办法
Posted by admin on 2010年08月12日
0 comments
gmail 邮件中css无效style无效background image背景图片无效不显示的解决办法
几乎每个会员制网站都需要通过后台发送邮件来与会员进行沟通，如注册确认、营销推广。这些由站方发给会员的信件，往往纯
文本格式已不能满足界面和交互的要 求，这时候我们就需要发送HTML页面。由于HTML邮件不是独立的HOST在本站的页面，是寄人篱下的。所以编写HTML邮件与编写HTML页面有很大 的不同。因为，各面向网民的主流邮箱都或多或少的会对它们接收到的HTML邮件在后台进行过滤。毫无疑问，JS代码是被严格过滤掉的，包括所有的事件监听 属性，如onclick、onmouseover，这是基于邮件安全性的考虑。不仅如此，CSS代码也会被部分过滤。本人要讲的就是如何编写不被各大主流 邮箱过滤的，能正常显示的HTML邮件。
gmail会自动过滤掉 head里的<style>设置的css，所以必须要把css写在html里面。
例如 <div style=”font-size:14px;”>
另外，gmail不支持在css里定义background里的image，包括background:url(”…”)和background-image:url(“..”)
解决办法是 在div的外面加上一层 <table>和<td>
并在<td>里加上background属性，例如
<table>
<tr>
<td background=”http://www.vivizu.com/test.jpg”>
<div>test</div>
</td>
</tr>
</table>
呵呵 ，就可以看到背景图片了
YUI宽度不一样、变小问题 -宽度设置，使用 em ：当用户改变字体大小时，宽度同时改变
Posted by admin on 2010年08月12日
0 comments
技巧：用 13 像素来平分宽度（保留小数到千分位），而 IE 浏览器用 13.333 。
/* 750 centered, and backward compatibility */
#doc {
width:57.69em;
*width:56.251em;
min-width:750px;
}
No IE: 57.69 = 750 / 13
IE: 56.251 = 750 / 13.333
注：《Setting Page Width with YUI Grids》 一文中提到：IE 下的 em 是宽度除以 13 ，再乘以 .9759 得到。同解于为什么现在的 YUI 源码中 IE 下 750px 的宽度是：56.301em（750 / 13 * 0.9759）。
此算法将在 YUI 的下个版本中换为上面的新算法（IE 浏览器用 13.333 ）。
技巧：用 13 像素来平分宽度（保留小数到千分位），而 IE 浏览器用 13.333 。
/* 750 centered, and backward compatibility */#doc {width:57.69em;*width:56.251em;min-width:750px;}
No IE: 57.69 = 750 / 13
IE: 56.251 = 750 / 13.333
注：《Setting Page Width with YUI Grids》 一文中提到：IE 下的 em 是宽度除以 13 ，再乘以 .9759 得到。同解于为什么现在的 YUI 源码中 IE 下 750px 的宽度是：56.301em（750 / 13 * 0.9759）。
此算法将在 YUI 的下个版本中换为上面的新算法（IE 浏览器用 13.333 ）。
所以，当你发现你的宽度与 px的值不一致时，可能是由于你设置了body的字体不是13px,将body的font-size设置为13px,即可显示正确。
了解CSS的查找匹配原理，让CSS更简洁、高效
Posted by admin on 2010年06月8日
0 comments
用了这么多年的CSS，现在才明白CSS的真正匹配原理，不知道你是否也跟我 一样？看1个简单的CSS：
DIV#divBox p span.red{color:red;}，按习惯我们对这个CSS 的 理解是，浏览器先查找id为divBox的DIV元素，当找到后，再找其下的所有p元素，然后再查找所有span元素，当发现有span的class为 red的时候，就应用该style。多么简单易懂的原理，可是这个理解却是完完全全相反、错误的。
Web 设计中的中国传统色彩速查表
Posted by admin on 2010年05月26日
0 comments
觉得很全，分享一下，以下为作者iiduce所言“诗词中有：“名花韵在年晴初，雨沁胭脂脸更敷。”，你知道胭脂是什么颜色么？“回眸一笑百媚生，六宫粉 黛无颜色。”中的这个“黛”又是指什么颜色呢？“漆黑一片”里漆黑真的就是完全的黑色吗？在下面这个Web设计中的中国传统色彩速查表，你可以得到准确的 答案。
firefox 下模拟text-overflow:ellipsis
Posted by admin on 2010年05月14日
0 comments
Javascript && CSS WEB 浏览器兼容
Posted by admin on 2010年05月14日
0 comments
这是我总结多年的一个小文档，最近看见有人咨询浏览器兼容的问题，就贡献出来。
并不一定全，有的也可能不准确，比如新出的IE8、 Chrome等都没有太多涉及，虽然最近做的一些项目也兼容了IE8、Chrome等，但都没来的及总结进去，后来就忘了…汗。大家一起慢慢完善吧。
javascript 部分
1. document.form.item 问题
问题：
代 码中存在 document.formName.item(“itemName”) 这样的语句，不能在FF下运行
解决方法：
改用 document.formName.elements["elementName"]
2. 集合类对象问题
问 题：
代码中许多集合类对象取用时使用()，IE能接受，FF不能
解决方法：
改用 [] 作为下标运算，例：
document.getElementsByName(“inputName”)(1) 改为 document.getElementsByName(“inputName”)[1]
(全文…)
DIV 图片垂直居中
Posted by admin on 2010年03月31日
0 comments
.pic
{
width:160px;
height:160px;
border:solid?1px?#ccc;
text-align:center;
}
{
width:160px;
height:160px;
border:solid?1px?#ccc;
text-align:center;
}
.pic?a
{
display:table-cell;
width:160px;
height:160px;
vertical-align:middle;
*display:block;
*font-family:Arial!important;
*font-size:140px;/*约为高度的0.873，160*0.873?约为140*/
*line-height:1;
}
.pic?a?img
{
vertical-align:middle;
max-width:160px;
max-height:160px;
border:0px;
}
CSS em与px的区别
Posted by admin on 2010年03月31日
0 comments
CSS中定义的长度单位有两种，相对长度和绝对长度。相对长度单位主要有：
*?em?(em，元素的字体的高度)
*?ex?(x- height，字母?”x”?的高度)
*?px?(像素，相对于屏幕的分辨率)
绝对长度单位主要有：
*?in?(英 寸，1英寸=2.54厘米)
*?cm?(厘米，1厘米=10毫米)
*?mm?(米)
*?pt?(点，1点=1/72 英寸)
*?pc?(帕，1帕=12点)
使用px和em主要优缺点如下：
1.?IE无法调整那些使用px作 为单位的字体大小，而firefox能够调整使用px和em作为单位的字体；
2.?任意浏览器的默认字体高都是16px。所有未经调整的浏览 器都符合：?1em=16px。那么 12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明?Font- size=62.5%，这就使em值变为?16px*62.5%=10px,?这样12px=1.2em,?10px=1em,?也就是说只需要将你的原 来的px数值除以10，然后换上em作为单位就行了。
em有如下特点：
(全文…)
css 之清除区域
Posted by admin on 2010年03月3日
0 comments
清除区域：在css2.1中引入了一个清除区域，当为一个 元素使用clear时， 他的外边距并没有发生变化，而是这个清除区域使得元素落在了浮动元素的下面。
1? <style?type=”text/css”>
2?*{margin:0;padding:0;}
3?p{border:?1px?#66CC00?solid;}
4?img?{
5?????width:40px;
6?????height:40px;
7?????float:left;
8?????border:?1px?#66CC00?solid;
9?}
10?h3{
11?????clear:both;
12?????border:?1px?#66CC00?solid;
13?????}
14?div{padding:20px;width:400px;height:400px;}
15?</style>
16?</head>
17
18?<body>
19?<div>
20?<p>我在上面</p>
21?<img?src=”QQ 截图未命名.png”?/>
22?<h3>我在下面</h3>
23?</div>效果：
粤ICP备09177306号