关注F2E-UED-SEO

80后的我,认为世界上有3件事情很难改变
1.支离破碎的家庭
2.选择了就轻易难舍的感情
3.老人家倔强的性格
大过年的,父母还吵架
震耳欲聋的声音估计打开窗户整个小区可以清晰的听见
激战的导火索都是看似寻常的小事
然而激战爆发让双方瞬间量出了自己的底牌
这战争的能力可以扩散到家庭破碎的程度
亲身体验到战争的和解不是电视新闻中的那么简单
父母的性格让一向乐观的我都觉得很难通过简单的劝导改变
这个世界真的就注定需要有这么残忍

从小城市到大城市
改变不了这个世界，就必须改变自己…
也许父母的吵架都是积怨已久的宣泄
也许父母都没有将心比心的互相考虑
也许他们的争吵都是为了过得去面子
何必…
是非只因多开口，烦恼皆因强出头
不需要悲观的去考虑现在的处境
而需要乐观的去思考将来的生活
生容易,活容易
生活不容易
要想好好生活下去，
互相都乐观一点

我和她在交往的时候也说的很清楚
希望今后的生活应该是夫妻以诚相待，相敬如宾，
吵架可以是暂时的宣泄，但绝对不是解决问题的办法。
乐观的面对问题，解决问题，才是和谐社会的王道。

上天让我遇见了一个美丽的小公主…
可是我感觉她近在眼前，却又远在天边…
我不知道这是梦中的美好 还是现实的残酷…
就算曾经的太阳多么有自信…
却仍然无法驾驭自己冲动的内心…
前进的道路并非一片光明…
太阳一定可以继续艰难的前行…
困难有很多，一个一个克服掉就好…

美丽的小公主…
希望梦里还能见到你…

自从微软强制绑定浏览器以来，IE独霸浏览器的半壁江山，从IE4.0开始到现在出来的IE9，真是“IE代有人才出，各领风骚好几年”，回首曾经风火一时的IE6，如今已经沦为众矢之的问题先生，呵呵，解决兼容问题本身就是一名前端理应具备的素质。
不过看到阿里UED分享的如此文章，心里不由得一阵，一些原本没接触过的和接触过的这里都有，呵呵感谢阿里的分享精神：

世界之大无奇不有，想当年，清政府闭关锁国，造成了技术 经济全面落后的中国。现如今作为一名前端，咱也不能关起门来闭门造车，要多看看行业内一些顶尖的团队的经验心得，今天偶然点开淘宝UED的blog，发现CSS的border的神奇作用！！通过CSS可以做出你想要的三角形也可以做出一些简单的圆角边框，毕竟有些门户网站少发一次图片请求比多一行CSS代码更节省资源！

一个盒子包括: margin+border+padding+content
– 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等.
–我们可以通过调整宽度的大小来调节三角形形状.

Example One. 如果我们正常设置一个盒子的边框：

#div1 {
    height:20px;
    width:20px;
    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
    border-style:solid;
    border-width:20px;
}

效果就是上图!

Example Two: 现在我们设置这个盒子的高度和宽度为0！

#div2 {
    height:0;
    width:0;
    overflow: hidden; /* 这里设置overflow, font-size, line-height */
    font-size: 0;     /* 虽然宽高度为0, 但在IE6下会具有默认的 */
    line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
    border-style:solid;
    border-width:20px;
}

嘿，伙计，到这里你是否领悟到啥了？对！4个不同方向的三角形可以诞生了，需要的是你设置它们的背景色！

Example Three:现在我们保留上面来看看,#28

#div3 {
    height:0;
    width:0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color:#FF9600 transparent transparent transparent;
    border-style:solid;
    border-width:20px;
}

这里需要注意的是，IE这位爷素来六亲不认，如果IE6的话 不能写transparent,只能让边框色与背景色相同

Example Four:上面都是小三角的斜边都是依靠原来盒子的一条边,
还有另外一种形式的小三角, 就是斜边在盒子的对角线上：

#div4 {
    height:0;
    width:0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color:#FF9600 #3366ff transparent transparent;
    border-style:solid solid dashed dashed;
    border-width:40px 40px 0 0 ;
}

现在保留其中一种颜色, 就可以得到斜边在对角线上的三角形了…
多个这样的三角形, 通过设置边框大小, 颜色, 拼凑起来可以形成任意形状的三角形！！
< 像这种不规则的三角形, 延伸一下, 放在气泡框上, 就可以省去拼背景图片的麻烦了，要知道，有些时候多两行CSS和html代码要比多一次图片请求更省的多！

另外, 关于气泡框, 可以使用棱形字符(◆)来实现, 设置其font-size, 颜色和背景色一致, 定位可以使用margin负值和absolute绝对定位来实现！
———————————————————-
我是分割线
———————————————————-

下面我们来看：Border圆角图案生成

要想实现上图，简单的CSS+html~~

Html

<div class="box">
    <div class="top"></div>
    <div class="center">我是一只小小鸟、小小鸟！</div>
    <div class="bot"></div>
</div>

Css

.box{width:500px;}
.top{border-bottom:3px solid; border-top-color:#cc0000; border-bottom-color:#cc0000;
     border-left:3px dotted transparent; border-right:3px dotted transparent;}
.center{padding:10px 20px; color:white; font-size:14px; background:#cc0000;}
.bot{border-top:3px solid; border-top-color:#cc0000; border-bottom-color:#cccccc;
     border-left:3px dotted transparent; border-right:3px dotted transparent;}

原理很简单，我们拆开来看，有图有真像：

简单吧？
不过IE6的话 会有点锯齿状，不过还好，问题不是很大

虽然Chrome也有类似Firebug的调试工具，但是始终觉得没有Firefox里来的顺手，所以平时用Google的Chrome比较少，而且Google的信誉摆在这里，想当然是得跟着国际标准W3C混的，不过事有蹊跷，今天无意中用Chrome打开页面，发现有些绝对定位的地方Chrome解析的确实不太一样，所以翻遍了网上的兼容和解决方案，终于在群里一位热心朋友的帮助下，顺利搞定!

@media screen and (-webkit-min-device-pixel-ratio:0){
    ********************
}

最近经常有用户传输图片过大
导致IE6下因为浮动换行问题
所以以下代码控制好图片的最大宽度！

.rightpart img {
width: expression(this.width > 700 ? 700: true); max-width: 700px;
}

700px即是最大宽度

如果图片超过700px按700px显示
如果图片小于700px则按正常显示…

被flash遮盖比较简单，给flash的插入代码里加入wmode=”transparent”
设置flash透明，就可以搞定。

下面说被js遮盖的问题
昨天下午做的下拉菜单本来是好的，切换也是好的；
但是两个放在一起，标准的FF浏览器下一切正常
但是万恶的IE浏览器确始终，就是下面的切换效果挡住了下拉菜单
百思不得其解，
直觉也告诉我，调整z-index是肯定可以的;
但是确犯了一个原则性的错误，z-index必须与posiotion同时出现！！
否则z-index属性无效！！
于是接下来调整下拉菜单上各个标签的z-index和position.
还是解决不了问题。
后经过网友天狗行空点拨，
才发现IE要想让IE这尊大佛认你的下拉z-index还必须给菜单的最外层级加入z-index
也就是body下的根层级，
打比方你的页面结构如下：

<div class="header"></div>
<div class="nav_bar">
      <div class="nav_mid"><ul><li>下拉菜单***</li></ul></div>
</div>
<div class="main"></div>
<div class="footer"></div>

菜单放再nav_bar下的nav_mid的标签里;加入

.nav_bar{position:relative;z-index:9999;}

才能解决….
不知道我这样说大家清楚不清楚。

CSS Sprites优点

CSS Sprites为什么突然跑火，跟能够提升网站性能有关。显而易见，这是它的巨大优点之一。
利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
个人认为CSS Sprites能减少图片的字节，我曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

CSS Sprites缺点

诚然CSS Sprites是如此的强大，但是也存在一些不可忽视的缺点。
在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好只够的空间，防止板块内不会出现不必要的背景，否则可能会出现出现干扰图片的情况；这些还好，做痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；
CSS Sprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；不过网上已经有高手开发出“CSS Sprites 样式生成工具”，大家可以尝试一下。
CSS Sprites在维护的时候比较麻烦，sprites是一般双刃剑，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，有只能（最好）往下加图片，这样图片的字节就增加了，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐，而且重新算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。当然，在性能的口号下，这些都是可以克服的。
由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。

CSS Sprites总结
性能压倒一切。CSS Sprites非常值得学习和应用，特别是页面有一堆ico（图标）。总之很多时候大家要权衡一下利弊，在决定是不是应用CSS Sprites。为保持兼容性和维护性，sprites图片中的各个部分保持一定的距离是一种不错的做法。

原文：http://ued.alimama.com/?p=233

设想每两个导航菜单的栏目中间有跟竖线de实现方法
因为菜单要动态生成且每个菜单的宽度不固定.

所以我自己想的方式是:每个li的右边上加个2px竖线背景，这样li的最后1个也有背景，然后通过JS获取最后1个li的位置，给最后1个li加上background:none;
这方法需要通过JS；且修改不方便

今天看见dedecms和迅雷看看的导航差不多；也是菜单中间有竖线，
研究一下，发现CSS也能巧妙解决，即把li的2px的竖线背景放在li的左边，然后通过ul的left:-2px；来实现ul本身遮盖2px的li背景,然后li下padding-left:2px可以显示其他li的背景；这样的想法在FF下可以通过。不过要想让IE6这尊大佛认可，还需要加入overflow:hidden;zoom:1
这样的话 CSS即可轻松实现！
如果需要调整文字与竖线的距离，可通过定义a标签下的padding实现！

关键代码如下
.nav ul {left:-2px;overflow:hidden;position:relative;zoom:1;display:inline-block;*display:inline; margin-left:198px;}
.nav li{background:url(../images/li_bg.gif) no-repeat left center;height:48px;position:relative;line-height:48px;left:-2px;overflow:hidden; padding-left:2px;display:inline-block; zoom:1; *display:inline;}
.nav li a{ padding:0 14px; display:block; height:48px; line-height:48px; color:#FFF;}

IE8不兼容解决方案：
这句话加在头部

<meta http-equiv="x-ua-compatible" content="ie=7" />

关注过IE8的css hack的人相信大家都在使用这个hack，就是“\9”的css hack：

.test{ color:#000000; /* FF,OP支持 */
color:#0000FF\9; /* 所有IE浏览器(ie6+)支持 ；但是IE8不能识别“*”和“_”的css hack；所以我们可以这样写hack */
[color:#000000;color:#00FF00; /* SF,CH支持 */
*color:#FFFF00; /* IE7支持 */
_color:#FF0000; /* IE6支持 */ }
讲讲color:#0000FF\9：

color:#0000FF\9 的hack支持IE6-IE8（其他版本没有测试），
但是IE8不能识别“*”和“_”的css hack，
所以我们可以使用 color:#0000FF\9; ;/*ie6,ie7,ie8*/
*color:#FFFF00;/*ie7*/
_color:#FF0000;/*ie6*/
来区分IE的各个版本。至于为什么使用“\9”我真的不清楚原因，
但是其他0-13的数字，最终效果如下：

其中：OP表示Opera，SA表示Safari，Ch表示Chrome；
当然你如果还有耐心可以测试“\14”，“\15”，“\16”。。。
从上面测试结果我们可以看出,
“\0”的写法只被IE8识别，ie6，ie7都不能识别，那么“\0”应该是IE8的真正hack。主流浏览器的CSS hack这样更好一些：
.test{ color:#000000; /* FF,OP支持 */
color:#0000FF\0; /* IE8支持*/
[color:#000000;color:#00FF00; /* SF,CH支持 */
*color:#FFFF00; /* IE7支持 */
_color:#FF0000; /* IE6支持 */ }
其中：OP表示Opera，SA表示Safari，Ch表示Chrome。

声明：本文系转载，作者不详