🌓

jquery的append函数在IE7下无效解决办法

2015-07-13

使用jquery的函数append在页面上加带标签的内容，在FF下是没问题的，在IE7下总是加不上去

经过测试发现我的内容里面多一个

去掉之后就没问题了。看来IE7下append对标签的正确性非常敏感啊。
在网上查资料，append的另一个问题是:
当用到自定义标签时在IE7下也有这个问题。

IE7,IE8怪癖模式下reflow与expression导致的问题

2015-07-13

在一个项目中为遮蔽FLASH,在IE里的一些特定条件下进行了reflow. 另外,为支持IE6和IE7,IE8怪癖模式下的fixed,使用了CSS表达expression 导致了悲剧的出现… 看效果:

<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style>
html{ background:url(about:blank) fixed;}
#d1{
zoom:expression(fix());
}
</style>
</head>
<body>
<div style ="width:60px;height:500px;border:solid 1px #000;background:#e2e2e2;position:absolute;" id="d1"></div>
<script>
var el = document.getElementById('d1')
function fix() {
el.style.top = document.body.scrollTop + 10 + 'px';
};
onscroll = function () {
document.body.style.zoom = 1;
document.body.style.zoom = null;
}
</script>
</body>
</html>

下拉菜单select高度（兼容IE6/IE7/IE8/火狐等主流浏览器）

2015-07-13

主要思路：

用CSS设置select基本是没有效果的，因为select没有height这个属性，所以需要通过font-size来设置，使其高度撑起来。

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>兼容IE6/IE7/IE8/火狐---下拉菜单select高度</title>
<styletype="text/css">
.select{border:1px solid#ccc;line-height:22px;color:#666;margin:-1px;padding:4px3px;font-size:13px;width:93px;*width:85px;}

.select_border{*background:#fff;*border:1px solid#ccc;*padding:4px;width:83px;}

.container{*border:0;*position:relative;*width:83px;*height:18px;*overflow:hidden;*background:#fff;}
</style>
</head>
<body>
<divclass="select_border"> <divclass="container">
<select name=""class="select">
<optionselected="selected">区域不限
</option>
<option>北京</option>
<option>天津</option>
<option>上海</option>
<option>重庆</option>
</select>
</div>
</div>
</body>
</html>

如何禁止手机访问百度转码

2015-07-13

很多站长遇到这样的问题，用手机浏览器（如手机自带浏览器、uc、360等）打开自己的网站可以打开，但如果是通过搜索引擎搜索关键词要进入其网站，就显示一直在加载中。这就是百度转码问题，首先我们不要为了解决问题而去解决问题，如果你不想了解问题整个的来龙去脉，你可以直接跳到帖子尾部看解决方案。

一、百度开放设配服务介绍

为了提升用户的移动搜索结果浏览体验，百度移动搜索对具有对应手机站的PC站提供“开放适配”服务。如果您同时拥有PC站和手机站，且二者能够在内容上对应，您可向百度“提交”PC页—手机页的对应关系，若对应关系准确，将有助于百度在移动搜索中将原PC页结果替换为对应的手机页结果。积极的参与“开放适配”，将有助于您的手机站在百度移动搜索获得更好的展现，同时以更佳的浏览效果赢取用户口碑。

CSS判断浏览器

2015-07-13

在进行WEB标准网页的学习和应用过程中，网页对浏览器的兼容性是经常接触到的一个问题。其中因微软公司的Internet Explorer(简称IE)占据浏览器市场的大半江山，此外还有Firefox、Opera等。需要对这些浏览器进行兼容。

同时，单就IE而言，因IE版本的升级更替，目前浏览者使用的主要停留在 IE5(IE5.5)、IE6和IE7这三个版本中。而这3个版本对于我们制作的WEB标准网页（XHTML+CSS）解释执行的显示状况不尽相同。并且，其他非IE浏览器与IE对某些CSS解释也不一样。所以，通过IE浏览器中的专有条件注释可有针对性的进行相关属性的定义。条件注释只能用于Explorer 5+ Windows(以下简称IE)(条件注释从IE5开始被支持)。如果你安装了多个IE，条件注释（Conditional comments）将会以最高版本的IE为标准（目前为IE 7）。

IE条件注释可以怎么玩

2015-07-13

IE条件注释（Conditional comments）是IE浏览器私有的代码，是一个类似IF判断的语法注释块，IE5之上支持。

代码看起来是这样的

1
2
3

<!--[if IE 6]>
你正在使用IE6
<![endif]-->

多行文本溢出显示省略号(...)的方法

2015-07-13

现在的浏览器都支持text-overflow:ellipsis属性，用来实现单行文本的溢出显示省略号，但是这个属性并不支持多行文本。那么有没有方法在多行文本上实现同样的效果呢？

-webkit-line-clamp

Webkit支持一个名为-webkit-line-clamp的属性，他其实是一个WebKit-Specific Unsupported Property，也就是说这个属性并不是标准的一部分，可能是Webkit内部使用的，或者被弃用的属性。但是既然被人发现了，而且能用，为什么不试试呢~o(∩_∩)o

display兼容小结

2015-07-13

display:block 此元素将显示为块级元素，此元素前后会带有换行符。

display:table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符

使用发现以上两个的区别是，如果元素同时定义边框可以看出，block时元素宽度是100% 而table时宽度仅为内容所占宽度。【除了ie7ie6定义为table也都是占100%宽度外】

做SEO除了百度百科你还需要了解这些！

2015-07-12

无论是SEO，还是推广，百度百科都是兵家必争之地。好的百度百科可以带给网站很大的权重。当然对于百度搜索引擎就更加不要说了，百利而无一害呀。

可是并不是你想要的百度百科词条都可以让你去编辑了。那为什么不试试他们呢？

维基百科

作为始祖的维基百科有着各类语言的百科内容。当然作为中国人对于推广中文维基百科也就香丹的重要了。但是现在维基百科创建已经不是那么容易的啦。个人感觉比百度百科难一点，如果你可以搞定，那你得试试~

如何让网站顺利通过W3C验证

2015-07-12

1、官方的检查机制有些问题。背景色与字体色相同的情况下会有错误提示。这是不合理的检测报错机制。

2、图片的 alt=”” 属性必须每张图片都加上，而且对齐属性用CSS来定义。不加不能通过XHTML 1.0的验证。

3、每个文档必须加上DTD声明。
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
去掉后能通过验证，但有警告：No DOCTYPE found! Checking with default XHTML 1.0 Transitional Document Type.

产品用户体验设计

2015-07-12

1、用户体验设计的定义

用户体验（User Experience，UE／UX）是指用户在使用一个产品（服务）的过程中建立起来的心理感受，这是一种纯主观的个人感受。

服务器不支持FLV的解决办法

2015-07-12

随着各大视频提供商对视频网站的投入，FLV文件开始越来越多的出现在我们的身边，闲暇之余，自己也想在服务器上提供一些简单的FLV视频文件，结果发现无法播放。
打开IIS，然后在mypc(本地计算机)上面点击右键属性（很多帮助文件都没有说这一点，很多人以为是在站点上面点击右键，却发现找不到MIME类型，其中mypc是你的计算机名）如图所示：

网页设计初学者应该把握几个大局

2015-07-12

网页设计的综合性极强，如果你没有5年以上的设计经验，可以尽量放低调一点，哪怕你是某知名设计艺术学校毕业的，也一样。它跟平面设计差别很大，平面设计更追求单一化、精细化，而网页设计不仅要做到精细，更考验设计师的综合能力。

对于网页设计初学者而言，一定要把握以下几个大局，你的方向才不会偏离，少走很多弯路。

从事前端开发必须要了解的CSS原理

2015-07-12

从事Web前端开发的人都与CSS打交道很多，有的人也许不知道CSS是怎么去工作的，写出来的CSS浏览器是怎么样去解析的呢？当这个成为我们提高CSS水平的一个瓶颈时，是否应该多了解一下呢？

一、浏览器的发展与CSS

网页浏览器主要通过 HTTP 协议连接网页服务器而取得网页， HTTP 容许网页浏览器送交资料到网页服务器并且获取网页。目前最常用的 HTTP 是 HTTP/1.1，这个协议在 RFC2616 中被完整定义。HTTP/1.1 有其一套 Internet Explorer 并不完全支援的标准，然而许多其他当代的网页浏览器则完全支援这些标准。网页的位置以 URL（统一资源定位符）指示，此乃网页的地址；以 http: 开首的便是通过 HTTP协议登陆。很多浏览器同时支援其他类型的 URL 及协议，例如 ftp: 是 FTP（档案传送协议）、gopher: 是 Gopher 及 https: 是 HTTPS（以SSL加密的HTTP）。

ps保存png8消除锯齿的方法

2015-07-12

发现制作完成的ＰＮＧ图片上传网站后，出现许多锯齿。蓝色理想里的人们认为模糊图片边缘，用绘制工具对锯齿进行涂抹可以解决锯齿问题。但我认为这种方法比较繁琐，而且处理小图片的过程中很容易损害图片的像素，造成精度降低。

经反复测试，正确的方法应该为：将制作好的ＰＮＧ图片保存为“ＷＥＢ”和设备所用的格式——ＡＬＴ＋ＳＨＩＦＴ＋ＣＴＲＬ＋Ｓ，打开参数控制面板。在预设中选ＰＮＧ８、可选择、扩散、勾选“可选择”复选框，再选“无透明度仿色”。然后选颜色２５６，仿色８７％（视现实情况自定），杂边选与背景相似的颜色，亦可自定，能无痕地填补锯齿为佳。ＷＥＢ靠色自选，上面的ＰＮＧ选“０”。

关注前端开发流程

2015-07-12

流程，通俗来讲，就是许多人，在做一系列的事情时，怎样相互协调，安排好这一系列事情的先后顺序，有什么事先的约定，需要达到怎样的预期目标。

在UED里，前端同学需要处理的需求比较多，早些时候，前端这里的开发流程还是比较模糊的，UED以外的同学也不清楚这边的工作具体是怎样进行的，所以难免会有需求插队的情况发生，打乱了大家的计划，因此今年Q3的时候，在与SCM团队同学的共同努力下，形成了一个前端的ASSETS发布流程。

Sublime Text 2快捷键大全

2015-07-12

Ctrl+L
选择整行(按住-继续选择下行)

Ctrl+KK
从光标处删除至行尾

Yslow-23条规则前端性能优化

2015-07-12

什么是YSlow？ YSlow是Yahoo发布的一款基于FireFox的插件。

如何安装YSlow？

安装YSlow必须首先先安装 Firebug，然后下载YSlow，再对其安装。

HTTP之GET与POST区别

2015-07-12

HTTP定义了与服务器交互的不同方法，最基本的方法是 GET 和 POST.

HTTP-GET和HTTP-POST是使用HTTP的标准协议动词，用于编码和传送变量名/变量值对参数，并且使用相关的请求语义。每个HTTP-GET和HTTP-POST都由一系列HTTP请求头组成，这些请求头定义了客户端从服务器请求了什么，而响应则是由一系列HTTP应答头和应答数据组成，如果请求成功则返回应答。

雅虎35条优化黄金守则

2015-07-12

Yahoo!的 Exceptional Performance团队为改善 Web性能带来最佳实践。他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。原版猛戳：Best Practices for Speeding Up Your Web Site，