<![CDATA[设计碎片 - Div+Css]]> http://blog.edotpower.com/ zh-cn PBlog2 v2.4 设计碎片 http://blog.edotpower.com/images/logos.gif http://blog.edotpower.com/ 设计碎片 http://blog.edotpower.com/default.asp?id=117 <![CDATA[DIV border边框显示不完全问题的解决方法]]> star520dust@163.com(stardust) Thu,13 Nov 2008 18:33:34 +0800 http://blog.edotpower.com/default.asp?id=117 1.加个高度

2。加个背景颜色（推荐）

]]> http://blog.edotpower.com/default.asp?id=87 <![CDATA[个性化下拉列表样式]]> star520dust@163.com(stardust) Tue,20 May 2008 17:31:03 +0800 http://blog.edotpower.com/default.asp?id=87 <HTML>
<HEAD>
<TITLE> simulate combox control - http://www.never-online.net </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
body, input
{
    font-family: verdana;
    font-size: 9pt;
}
h1
{
    font-family: tahoma;
    font-size: 22pt;
    text-align: left;
}
pre
{
    font-size: 9pt;
    font-family: verdana;
    border: 1px solid #006600;
    width: 400px;
    padding: 10px;
    background: #ffffff;
    color: #006600;
}
.CtlSelect
{
    border: 1px solid #006600;
    font-family: verdana;
    height: 20px;
    color: #006600;
    background: #ffffff;
    /*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected
{
    background: #006600;
    color: #ffffff;
    height: 20px;
}
.unselected
{
    height: 20px;
    color: #006600;
    line-height: 120%;
    border-bottom: 1px solid #006600;
}
.CtlSelect1
{
    border: 1px solid #003399;
    font-family: verdana;
    height: 20px;
    color: #003399;
    background: #ffffff;
    /*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected1
{
    background: #003399;
    color: #ffffff;
    height: 20px;
}
.unselected1
{
    height: 20px;
    color: #003399;
    line-height: 120%;
    border-bottom: 1px solid #003399;
}
.CtlSelect2
{
    border: 1px solid #990000;
    font-family: verdana;
    height: 20px;
    color: #990000;
    background: #ffffff;
    /*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected2
{
    background: #990000;
    color: #ffffff;
    height: 20px;
}
.unselected2
{
    height: 20px;
    color: #990000;
    line-height: 120%;
    border-bottom: 1px solid #990000;
}
.copyright
{
    margin-top: 10px;
    font-size: 9pt;
    text-align: center;
    color: #333;
    font-weight: bold;
}
</style>
</HEAD>

<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
//-------------------------------------------------------------
//  @ Module: simulate select control, IE only.
//  @ Debug in: IE 6.0
//  @ Script by: blueDestiny, never-online
//  @ Updated: 2006-3-22
//  @ Version: 1.0 apha
//  @ Email: blueDestiny [at] 126.com
//  @ Website: http://www.never-online.net
//  @ Please Hold this item please.
//
//  API
//  @ class: simulateSelect()
//
//  @ object.style(ctlStyle[,selStyle][,unselStyle])
//    ctlStyle: main control combox css class name
//    selStyle: when mouseover or option focus css class name
//    unselStyle: options blur's css class name
//
//  @ object.width=(widthPX)
//    widthPX must be a digit number.
//
//  @ object.height=(heightPX)
//    heightPX must be a digit number.
//
//  @ object.getValue(ctlSelID)
//    ctlSelID is the unique select control ID
//
//  -------------- for the next Version ----------
//  @ object.readOnly = (blnReadOnly)
//    blnReadOnly must be a boolean type or a number type.
//  @ object.addEvent(w, h)
//    w: fire handler's event.
//    h: handler function.
//-------------------------------------------------------------

function $(objID)
{
    return document.getElementById(objID);
};
function Offset(e)
{
    var t = e.offsetTop;
    var l = e.offsetLeft;
    var w = e.offsetWidth;
    var h = e.offsetHeight-2;

    while(e=e.offsetParent)
    {
        t+=e.offsetTop;
        l+=e.offsetLeft;
    }
    return {
        top : t,
        left : l,
        width : w,
        height : h
    }
}
//-----------------------------------------------
function simulateSelect() { with(this)
{
    this.IDs = [];
    this.name = this;
    //  property for beta Version
    //  can editable combox
    this.readonly = true;
    this.height = 20;
    this.width = null;
    this.ctlStyle = "CtlSelect";
    this.selStyle = "selected";
    this.unselStyle = "unselected";
    this.elementPrefix = "e__";
    this.inputPrefix = "i__";
    this.containerPrefix = "c__";
    this.buttonPrefix = "b__";
    return this;
}};
simulateSelect.prototype.init = function(ctlSelIDs) { with(this)
{
    eval(name).append(ctlSelIDs);
    eval(name).simulates();
}};

simulateSelect.prototype.style = function() { with(this)
{
    ctlStyle = arguments[0];
    selStyle = arguments[1];
    unselStyle = arguments[2];

}};
//-----------------------------------------------
simulateSelect.prototype.append = function(ctlSelIDs) { with(this)
{
    if( ctlSelIDs.indexOf(",")>0 )
    {
        var arrCtlSel = ctlSelIDs.split(",");
        for(var i=0; i<arrCtlSel.length; i++)
        {
            eval(name).IDs.push(arrCtlSel[i]);
        }
    }
    else
    {
        eval(name).IDs.push(ctlSelIDs);
    }
}};
simulateSelect.prototype.checkupOnMouseDown = function(e) { with(this)
{
    // here compatible mf.
    var el = e ? e.srcElement : e.target;
    if( el.id.indexOf(elementPrefix)>-1 ||  
    el.id.indexOf(inputPrefix)>-1 ||  
    el.id.indexOf(containerPrefix)>-1 ||  
    el.id.indexOf(buttonPrefix)>-1 )
    {
        return;
    }
    else
    {
        for(var i=0; i<eval(name).IDs.length; i++)
        if( $(containerPrefix + IDs[i]) )
        $(containerPrefix + eval(name).IDs[i]).style.display = "none";
    }

}};
simulateSelect.prototype.simulates = function() { with(this)
{
    for(var i=0; i<IDs.length; i++)
    eval(name).simulate(IDs[i]);
}};
simulateSelect.prototype.simulate = function(ctlSelID) { with (this)
{
    var input;
    var button;
    var object;
    var offset;

    object = $(ctlSelID);
    offset = Offset(object);
    input = document.createElement("INPUT");
    button = document.createElement("BUTTON");
    button.setAttribute("id", buttonPrefix + ctlSelID);
    //button.value = "⊿";
    button.value = "6";
    button.style.fontFamily = "Webdings, Marlett";
    button.style.background = "";
    button.onclick = input.onclick = function()
    {
        this.blur();
        eval(name).expand(ctlSelID, offset);
    }
    input.onselectstart = function() { eval(name).expand(ctlSelID, offset); event.returnValue = false; };
    input.setAttribute("id", inputPrefix + ctlSelID);
    input.title = button.title = "click expand options";
    input.style.cursor = button.style.cursor = "default";
    input.className = button.className = ctlStyle;
    input.style.width = (width>0 ? width : object.offsetWidth);
    height ? input.style.height=button.style.height=height : "";
    input.value = object[0].text;
    if( readonly==true ) input.readOnly=true;

    // this method is only IE.
    object.insertAdjacentElement("afterEnd",button);
    object.insertAdjacentElement("afterEnd",input);
    object.style.display = 'none';
}};
simulateSelect.prototype.expand = function(ctlSelID, offset) { with(this)
{
    var div, btn_off;
    var object = $(ctlSelID);

    if( !$(containerPrefix + ctlSelID) )
    {
        div = document.createElement("DIV");
        div.style.position = "absolute";
        div.style.display = "block";
        div.setAttribute("id", containerPrefix + ctlSelID);
        div.className = ctlStyle;
        div.style.left = offset.left;
        div.style.top = offset.top + offset.height;
        div.style.width = (width ? width : offset.width) + 20;
        div.style.height = offset.height;
        document.body.appendChild(div);

        for(var i=0; i<object.length; i++)
        {
            div = document.createElement("DIV");
            div.setAttribute("id", div.id = elementPrefix + ctlSelID + i);
            div.style.cursor = "default";

            if( object[i].text==$(inputPrefix + ctlSelID).value )
            div.className = selStyle;
            else
            div.className = unselStyle;

            div.innerText = div.title = object[i].text;
            div.style.height = height;
            div.setAttribute("value", object[i].value);

            div.onmouseover = function()
            {
                for(var j=0; j<$(containerPrefix + ctlSelID).childNodes.length; j++)
                {
                    if($(containerPrefix + ctlSelID).childNodes[j]==this)
                    $(containerPrefix + ctlSelID).childNodes[j].className = selStyle;
                    else
                    $(containerPrefix + ctlSelID).childNodes[j].className = unselStyle;
                }                        
            };
            div.onclick = function()
            {
                $(inputPrefix + ctlSelID).value = this.innerText;
                $(containerPrefix + ctlSelID).style.display = "none";
            };
            $(containerPrefix + ctlSelID).appendChild(div);
        }
        return;
    }

    if( $(containerPrefix + ctlSelID).style.display=="none" )
    {
        for(var i=0; i<object.length; i++)
        {
            if( object[i].text==$(inputPrefix + ctlSelID).value )
            $(elementPrefix + ctlSelID + i).className = selStyle;
            else
            $(elementPrefix + ctlSelID + i).className = unselStyle;
        }
        $(containerPrefix + ctlSelID).style.display="block";
        return;
    }

    if( $(containerPrefix + ctlSelID).style.display=="block" )
    {
        $(containerPrefix + ctlSelID).style.display="none";
        return;
    }
}};
simulateSelect.prototype.getValue = function(ctlSelID) { with(this)
{
    if( $(inputPrefix + ctlSelID) )
    return $(inputPrefix + ctlSelID).value;
    else
    return null;
}};
simulateSelect.prototype.addEvent = function(w, h) { with(this)
{
}};
//-----------------------------------------------
//window.onerror = Function("return true;");
//  IE only.
document.attachEvent("onmousedown", function() {
                        a.checkupOnMouseDown(event);
                        b.checkupOnMouseDown(event);
                        c.checkupOnMouseDown(event)
                        }
                    );
//-->
</SCRIPT>
<h1> simulate combox control </h1>
<h4> demonstrate </h4>



<select id="s0">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
</select>
</p>

<p>
<select id="s1">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">1option1</option>
<option value="2">1option2</option>
<option value="3">1option3</option>
<option value="4">1option4</option>
<option value="5">1option5</option>
</select>
</p>

<p>
<select id="s2">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">2option1</option>
<option value="2">2option2</option>
<option value="3">2option3</option>
<option value="4">2option4</option>
<option value="5">2option5</option>
</select>
</p>

<p>
<select id="s3">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">3option1</option>
<option value="2">3option2</option>
<option value="3">3option3</option>
<option value="4">3option4</option>
<option value="5">3option5</option>
</select>
</p>

<button onclick="alert(a.getValue('s1') + '\n\n' + b.getValue('s2'))" class="CtlSelect"> Get value </button>

<SCRIPT LANGUAGE="JavaScript">
<!--
    var a = new simulateSelect();
    a.style("CtlSelect", "selected", "unselected");
    a.init("s1");
    var b = new simulateSelect();
    b.style("CtlSelect1", "selected1", "unselected1");
    b.width = 300;
    b.init("s2");
    var c = new simulateSelect();
    c.style("CtlSelect2", "selected2", "unselected2");
    c.width = 320;
    c.init("s3");
//-->
</SCRIPT>

<h4> description </h4>
<pre>
//-------------------------------------------------------------
//  @ Module: simulate select control, IE only.
//  @ Debug in: IE 6.0
//  @ Script by: blueDestiny, never-online
//  @ Updated: 2006-3-22
//  @ Version: 1.0 apha
//  @ Email: blueDestiny [at] 126.com
//  @ Website: http://www.never-online.net
//  @ Please Hold this item please.
//
//  API
//  @ simulateSelect(ctlSelIDs)
//    ctlSelIDs: select control IDs, split by ","
//
//  @ simulateSelect.style(ctlStyle[,selStyle][,unselStyle])
//    ctlStyle: main control combox css class name
//    selStyle: when mouseover or option focus css class name
//    unselStyle: options blur's css class name
//
//  @ simulateSelect.width=(widthPX)
//    widthPX must be a digit number.
//
//  @ simulateSelect.height=(heightPX)
//    heightPX must be a digit number.
//
//  -------------- for the next Version ----------
//  @ simulateSelect.readOnly = (blnReadOnly)
//    blnReadOnly must be a boolean type or a number type.
//  @ simulateSelect.addEvent(w, h)
//    w: fire handler's event.
//    h: handler function.
//-------------------------------------------------------------
</pre>

<div class="copyright">
Power By blueDestiny, never-online
http://www.never-online.net
</div>
</BODY>
</HTML>
程序代码 程序代码
http://www.alixixi.com/Dev/HTML/jsrun/menu/2007/2007040932690.html
]]> http://blog.edotpower.com/default.asp?id=84 <![CDATA[CSS圆角边框 纯CSS制作]]> star520dust@163.com(stardust) Fri,16 May 2008 11:48:06 +0800 http://blog.edotpower.com/default.asp?id=84
#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}
#xsnazzy h1 {font-size:2.5em; color:#fff;}
#xsnazzy h2 {font-size:2em;color:#06a; border:0;}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2 {padding-top:0.5em;}
#xsnazzy {background: transparent; margin:1em;}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#ccc; border-left:1px solid #08c; border-right:1px solid #08c;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; background:#ccc; border:0 solid #08c; border-width:0 1px;}


</style>

<div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">
<h1>Snazzy Borders</h1>
<p>Based on Nifty Corners By Alessandro Fulciniti<br />http://pro.html.it/esempio/nifty/</p>

<h2>Rounded borders without images</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
  ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
  ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit
  in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
  facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
  luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>]]> http://blog.edotpower.com/default.asp?id=62 <![CDATA[如何避免层被图片撑大？]]> star520dust@163.com(stardust) Sun,20 Apr 2008 11:21:27 +0800 http://blog.edotpower.com/default.asp?id=62
table {
table-layout: fixed;
word-break: break-all;
}

如果是层呢，还是有办法，css控制div

div {
table-layout: fixed;
word-break: break-all;
width: 加上宽度;
overflow: hidden;    (让多出来的不显示。)  
}

要显示怎么办，那只能用js控制了
<script language="JavaScript">
<!--
var flag=false;
function DrawImage(ImgD){
   var image=new Image();
   image.src=ImgD.src;
   if(image.width>0 && image.height>0){  
     if(image.width>=510){
     ImgD.width=510;
     ImgD.height=(image.height*510)/image.width;
     }else{
     ImgD.width=image.width;
     ImgD.height=image.height;
     }  
    }
}
//-->
</script>

在图片的img 加入 onload="javascript:DrawImage(this);"

还有一种方法
img{flost:e­xpression(onload=this.width=500)}

img{flost:e­xpression(onload=function(){if(this.width>500)this.width=500})}

不过好像第二个不好用，不能判断自动缩放。
]]> http://blog.edotpower.com/default.asp?id=36 <![CDATA[CSS完美兼容IE6/IE7/FF的通用方法]]> star520dust@163.com(stardust) Fri,11 Jan 2008 09:38:09 +0800 http://blog.edotpower.com/default.asp?id=36
一、CSS HACK
以下两种方法几乎能解决现今所有HACK.

1, !important

随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
<style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>


2, IE6/IE77对FireFox

*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
}
</style>


注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

二、万能 float 闭合

关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.
<style>
/* Clear Fix */

.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>

三、其他兼容技巧

1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
2, 居中问题.
1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)
3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.

1 针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，
但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针
对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。
现在写一个CSS可以这样：

#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

2 css布局中的居中问题
主要的样式定义如下：

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明：
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，
只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

3 盒模型不同解释

#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

4 浮动ie产生的双倍距离

#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);

#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，
正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

6 页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，
而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类：
然后CSS这样设计：
#container{ min-width: 600px; width:e­xpression(document.body.clientWidth < 600? "600px": "auto" );}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7 清除浮动

.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}
或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，
所 以并不影响到IE/WIN浏览器。这种的最麻烦的......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}

8 DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}
HTML代码<div id="box"> <div id="left"></div> <div id="right"></div></div>

9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

10 IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。

11 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用
margin 或paddign 时。
例：
<div id="box">
<p>p对象中的内容</p>
</div>
CSS：#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。
]]> http://blog.edotpower.com/default.asp?id=35 <![CDATA[关于IE6/IE7/Firefox的CSS调试教程]]> star520dust@163.com(stardust) Fri,11 Jan 2008 09:36:55 +0800 http://blog.edotpower.com/default.asp?id=35
一些ＤＩＶ+ＣＳＳ的基础属性我在这里就不提了，主要说一下几个非常影响３种浏览器显示效果的问题．

三种浏览器的识别问题：

#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */

首先火狐不识别任何特殊符号，但是识别!important;而ＩＥ６识别*和_　，而ＩＥ７则识别*也识别!important;但是不识别_

所以在出现ＩＥ７之前我们可以用!important;*来调整页面，但是ＩＥ７的出现却打乱了我们的方法！！

在大部分情况下，调整好火狐和ＩＥ７后，ＩＥ６不会出现太大的差距，一般情况下出现的问题就是

浮动ie产生的双倍距离

举一个网上大侠的例子：

#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}

这句display:inline很重要！！

这里牵扯到一个问题，因为ＩＥ存在ＣＳＳ向后继承，而Firefox不支持，因此如果我们不对每个标签定义使用浮动float属性的话，在Firefox中就会出现ＤＩＶ溢出。使排版混乱．

另外的问题就是margin属性的像素差问题.

举个例子来解决：

margin-left:30px!important;margin-left:28px;

由于!important;只有ＩＥ７和Firefox识别，因此会默认执行margin-left:30px，而ＩＥ６不识别!important;因此会执行margin-left:28px;这样，用相同的方法，我们就可以清除2px像素的差来达到无缝衔接．由于在使用margin 或padding 时，我们会发现padding所出现的差值问题要比margin少的多的多！因此我强烈建议大家能用padding的时候尽量不要使用margin，这样会减少很多麻烦．
]]> http://blog.edotpower.com/default.asp?id=17 <![CDATA[CSS hack:区分IE6，IE7，firefox]]> star520dust@163.com(stardust) Wed,19 Dec 2007 19:48:09 +0800 http://blog.edotpower.com/default.asp?id=17
区别IE6与FF：
background:orange;*background:blue;


区别IE6与IE7：
background:green !important;background:blue;


区别IE7与FF：
background:orange; *background:green;


区别FF，IE7，IE6：
background:orange;*background:green !important;*background:blue;


注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important; ]]> http://blog.edotpower.com/default.asp?id=15 <![CDATA[css解决IE6，IE7，firefox兼容性问题 ]]> star520dust@163.com(stardust) Sun,16 Dec 2007 10:51:01 +0800 http://blog.edotpower.com/default.asp?id=15 http://www.eoogle.cn/html/2007-10/40.html

在当前IE6 IE7 FifeFox三分天下的情况下,浏览器兼容性问题成为网页设计者需要考虑的问题.    

区别不同浏览器的CSS hack写法：

区别IE6与FF：
       background:orange;*background:blue;

区别IE6与IE7：
       background:green !important;background:blue;

区别IE7与FF：
       background:orange; *background:green;

区别FF，IE7，IE6：
       background:orange;*background:green !important;*background:blue;

注：IE都能识别*;标准浏览器(如FF)不能识别*；

IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;

   IE6  IE7  FF
*  √  √  ×
!important  ×  √  √


------------------------------------------------------
另外再补充一个，下划线"_",
IE6支持下划线，IE7和firefox均不支持下划线。

于是大家还可以这样来区分IE6，IE7，firefox
: background:orange;*background:green;_background:blue;  

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

]]> http://blog.edotpower.com/default.asp?id=10 <![CDATA[正确的DIV&Css布局对SEO的影响]]> star520dust@163.com(stardust) Wed,12 Dec 2007 11:53:10 +0800 http://blog.edotpower.com/default.asp?id=10
我们都知道，蜘蛛是从上到下，从左到右访问网站信息的，而且，蜘蛛访问的是代码，而不是你网页做的如何漂亮，所以，在建立网站的时候，关键内容在网页中的位置非常重要。我们在研究那些比较大的网站时，都会发现，整个网页代码被很多注释所包围，这个注释有两个好处，一是便于技术人员对代码的调整，二是便于SEOer了解具体的关键内容在那里，便于调整。

举个很简单的例子，在一个三层DIV的网页中，假如你的关键区域在三层代码的最上面，那么搜索引擎第一行看到的就是你的关键区域，示例如下：

原代码：

<div id=div1>

<div id=div2>网站LOGO等信息</div>

<div id=div3>网站联系方式等信息</div>

<div id=div4>关键区域</div>

</div>

上面的代码我们可以看到，搜索引擎所看到的第一个信息就是LOGO和网站信息，蜘蛛来了第一眼看到的是个图片，首先就不知道这个是什么东西，据我观察，如果加了ALT还容易被K，所以，这么重要的地方就等于浪费了，再看第二行，是网站的联系方式，还是不是你网页的关键内容，蜘蛛就糊涂了，这对排名还是不利。而蜘蛛到了第三行代码才看到你要表达的是什么，这就被前两条所影响，你就不能得到你想要的实际效果了。

有些朋友可能会说，代码如果不这么写 就可能会乱，而且如果把最后一行代码提到第一行不好定位，这个简单，只要你用CSS控制好这一层的位置，然后代码你就可以随意移动了。

正确的写法可以这样

<div id=div1>

<div id=div4>关键区域</div>

<div id=div2>网站LOGO等信息</div>

<div id=div3>网站联系方式等信息</div>

</div>

总之一句话，养成良好的写代码的习惯，多研究搜索引擎的习惯，你做的网站，排名一定会很不错的。

本文原载：飘渺蝶舞的SEO梦想 ]]>