Web Frontend Develope, Design, Music, Life——Stay Hungry, Stay Foolish~

关于IE6的那些破事

处理ie6问题的最好策略是修复它,那么该如何去修复ie6的这些问题呢?

【计划一下你的设计并且让他们简单一些】
如果你即将开始提前计划你的设计,请花一点时间考虑一下最好的编程方案,以便可以避免一些布局问题,即使是最复杂的视觉设计也可以通过简单的代码来实现,如果你发现你用了很复杂的Markup,你最好重新看一下你的设计方案。

【使用一个正确的Doctype】
用了一个不正确的Doctype或许会触发ie6的quirks mode并且让你的页面在各个浏览器之前渲染不一致。使用以下的doctypes: HTML 4.01 Strict, HTML 4.01 Frameset, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Frameset, XHTML 1.0 Transitional, or XHTML 1.1
例如:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd“>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

【使用渐进增强】
渐进增强简单的意思是对所有用户来说在增加光彩之前确保基本的功能可用,一般来说,渐进增强是指在没有javascript的情况下让互联网应用程序可以工作,通过使用javascript来增加动画、Ajax效果等等;但是说到ie6,渐进增强的另一个原则是使用ie6不支持的css3,html5以及其它网络协议。

【使用CSS Reset规则】
一个简单的reset

body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}
【为ie6使用条件注释】
<!–[if IE6]>
  <link rel=”stylesheet” href=”http://domain.tld/ie6.css
    media=”screen” />
<![endif]–>
css内的ie hack
/* target IE6 */
* html #selector { color: red; }
/* filter IE6 */
html>body #selector { color: red; }
#selector {
  width: 200px !important; /* target other browsers */
  width: 100px;            /* target IE6 and lower */
}

【清除浮动】
.clearfix:after {
  content: ” “;
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix { display: block; }
/* End hide from IE-mac */

【IE的Javascript内存泄露】
由于ie使用它自己的内存管理,所以当操作javascript的时候没有收回内存时或许会产生内存泄露。
Douglas Crockford有一篇文章写了“preventing JavaScript memory leaks in Internet Explorer”.
Taobao Search&AD UED的元璋兄也曾经写了一篇通过try catch来防止ie的内存泄露的文章,看代码吧:
with mememory leak:
function createButton() {
      var obj = document.createElement(”button”);
      obj.innerHTML = “click me”;
      obj.onclick = function() {
        //handle onclick
      }
      obj.onmouseover = function() {
        //handle onmouseover
      }
      return obj;//return a object which has memory leak problem in IE6
    }
    var dButton = document.getElementsById(”d1″).appendChild(createButton());
    //skipped….
without mememory leak:
 /**
     * Use the try … finally statement to resolve the memory leak issue
     */
    function createButton() {
      var obj = document.createElement(”button”);
      obj.innerHTML = “click me”;
      obj.onclick = function() {
        //handle onclick
      }
      obj.onmouseover = function() {
        //handle onmouseover
      }
      //this helps to fix the memory leak issue
      try {
        return obj;
      } finally {
        obj = null;
      }
    }
    var dButton = document.getElementsById(”d1″).appendChild(createButton());
    //skipped….

引入了finally声明,finnally声明定义了一段语句,这段语句将总是在try语句块后执行完成后来执行。通过这个就可以避免内存泄露,很奇怪吧~

2009/09/28HTML

0 Comments

了解HTML5

html5是正在起草的最新超文本标记语言,大部分的主流浏览器(ff3.5, chrome, opera, Safari)都已经支持了html5,有一句话说的好“XHTML 2: 出师未捷身先死, HTML 5:万千宠爱于一身”,我个人也比较倾向于html5这种标准,很多浏览器厂商对于html5也是表现了前所未有的热情,因此html5或许不久后将成为主流,有一个网站html5 gallery列举了一些正在使用html5的网站,可以查看一下他们的源码。那么html5有哪些新的东西呢?

【多媒体标签】
html5为作图、音频、视频引入了一组新的标签,这些标签可以让浏览器的体验更好,并且让我们在互联网上浏览媒体更加标准化。

<canvas>
canvas可以让你很容易地画矩形、曲线、直线,但是还是有一些局限,比如描边和阴影。要画图首先要在页面加入一个canvas标签,然后是通过javascript来做画图这件事。例如:
<canvas id=”the_canvas” width=”200″ height=”200″>
<p>Your browser doesn’t support the canvas tag.</p>
</canvas>

var drawingCanvas = document.getElementById(’the_canvas’);
下面是检测dom是否存在这个canvas以及浏览器是否支持canvas标签
if(drawingCanvas.getContext) {
// Create the 2D drawing canvas
var context = drawingCanvas.getContext(’2d’);
//Canvas commands go here
}
<audio>
<video>

【结构化标签】
<section>
<header>
<footer>
<nav>
<article>
<aside>
<figure>

【内联标签】
<mark>
<time>
<meter>
<progress>
新增的Form Input类型

* datetime
* datetime-local
* date
* month
* week
* time
* number
* range
* email
* url

【不建议使用的标签】

* acronym
* applet
* basefont
* big
* center
* dir
* font
* frame
* frameset
* isindex
* noframes
* noscript
* s
* strike
* tt
* u

【交互性标签】
<details>
<datagrid>
<menu>
【其它方面的变化】
新的文档类型声明
<!DOCTYPE HTML>
href属性
你可以在任何html元素上加href,让其成为可以链接的。
Asynchronous属性
通过给script加async属性来决定脚本是否异步加载,这样可以防止阻断网站。

输入提示实现模式

上周的“懒懒交流会”,玉伯同学出了一个题目,“输入框提示”设计,我也做了一个,很遗憾因为当天很忙刚去了后就回来了没有去听这个分析,不过后来看到了很多人的思路。

我的demo在这里,我的想法是每一个含有”tip-input”的class的input都会有这个输入提示的功能,考虑了可重用性。玉伯总结了大概5种方案,看这里

正好今天看到了一篇文章讲这个,所以想起了。

通常的方案基本上是:

CSS:

.hint {
color: #999;
}

Markup:

<input type=”text” id=”sbx”>

JavaScript (based on YUI 3.0.0):

YUI().use(’node’, function (Y) {

var sbx = Y.get(’#sbx’);

Y.on(’domready’, function () {

sbx.set(’value’, ‘Search’);
sbx.addClass(’hint’);

Y.on(’focus’, function () {
if (this.get(’value’) === ‘Search’) {
this.set(’value’, ”);
this.removeClass(’hint’);
}
}, sbx);

Y.on(’blur’, function () {
if (this.get(’value’) === ”) {
this.set(’value’, ‘Search’);
this.addClass(’hint’);
}
}, sbx);

});
});

这个和我的方案如出一辙,现在看来我忽略了一个问题,就是如果值为空的情况下,有可能会把提示的文字提交了; 还有一个问题就是,没有使用label,对于屏幕阅读者没有做到可访问性。因此,比较好的方案是通过利用label作为提示文字。
CSS:

#container {
position: relative;
}

#container label {
position: absolute;
top: 4px; left: 3px;
color: #999;
cursor: text;
}

#container label.offscreen {
left: -9999px;
}

Markup:

<div id=”container”>
<label for=”sbx” class=”offscreen”>Search</label>
<input type=”text” id=”sbx”>
</div>

JavaScript (based on YUI 3.0.0):

YUI().use(’node’, function (Y) {

var sbx = Y.get(’#sbx’),
lbl = Y.get(’#container label’);

Y.on(’domready’, function () {

sbx.set(’value’, ”);
lbl.removeClass(’offscreen’);

Y.on(’mousedown’, function () {
setTimeout(function () {
sbx.focus();
}, 0);
}, lbl);

Y.on(’focus’, function () {
lbl.addClass(’offscreen’);
}, sbx);

Y.on(’blur’, function () {
if (this.get(’value’) === ”) {
lbl.removeClass(’offscreen’);
}
}, sbx);

});
});

2009/09/13CSS

7 Comments

关于IE的bug(CSS)

在开发中我们常会在ie中遇到很多莫名的bug,尤其是ie6这个早就该退出历史的浏览器。刚刚在haslayout.net上看到有总结ie的一些bug,分享一下。
1.图片label bug,影响版本ie6/ie7/ie8,当label中有img的时候无法触发点击选中form元素事件.
demo http://haslayout.net/demos/Image-Label-Focus-Bug-Demo.html
fix demo http://haslayout.net/demos/Image-Label-Focus-Bug-Fixed-Demo-CMS.html
解决方案:通过给<label>内加入一个空的span标签,然后设置position:absolute;background:url(#); 设置label float:left; position:relative;overflow:hidden;就可以解决了
2.设置margin auto的button没有居中,影响版本ie8,ie8下,如果给像button这样的标签(如button input[type="button"] input[type="submit"])设置{ display: block; margin-left: auto; margin-right: auto; }如果不设置宽度的话无法居中。
demo http://haslayout.net/demos/No-Auto-Margin-Center-on-Buttons-Inconsistency-Fixed-Demo-CS.html
解决方案:可以给button加上宽度,或是通过js,var buttons = document.getElementsByTagName(’button’); for ( var i = 0; i < buttons.length; i++ ) {
buttons[i].style.width = buttons[i].offsetWidth + ‘px’;
}
另一种解决方案:
<form action=”">
<div>
<button>This button should be centered</button>
<div class=”ie_fix”>
<input type=”button” value=”This button should be centered”>
</div>
<input type=”text”>
<input type=”checkbox”>
<input type=”radio”>
<div class=”ie_fix”>
<input type=”submit” value=”This button should be centered”>
</div>
<input type=”file”>
<select><option>test</option></select>
</div>
</form>
button, select, input {
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
}
.ie_fix {
text-align: center;
}
.ie_fix input[type="submit"],
.ie_fix input[type="button"] {
display: inline-block;
}
<!–[if IE 8]>
<style type=”text/css”>
button { display: table; }
</style>
<![endif]–>
给 input[type="button"] input[type="submit"]加上一个额外的标签,并设置display:inline-block;
并通过条件注释给ie8下设置button display:table;
3.不正确的浮动伸展布局,影响版本ie6/ie7,连续浮动的元素并且设置clear属性没法自动伸展
demo http://haslayout.net/demos/Incorrect-Float-Shrink-Wrap-Bug-Demo.html
fix demo http://haslayout.net/demos/Incorrect-Float-Shrink-Wrap-Bug-Fixed-Demo.html
解决方法:给连续浮动元素加一个span然后设置display:inline-block和display:block
4.文档滚动bug,影响版本ie6/ie7,不在html标签上设置overflow或许会影响到body上面的overflow
具体请看http://haslayout.net/css/Document-Scrollbars-Overflow-Inconsistency
5.连续浮动元素bug,影响版本ie6/ie7,http://haslayout.net/css/Float-Squeeze-Weird-Gap-Bug
6.连续浮动字符出现重复字符,影响版本ie6/ie7,http://haslayout.net/css/Float-Squeeze-Duplicate-Last-Character-Bug
这个和5的解决方案都差不多,5是通过加一个宽度,而这个是通过给浮动字符加一个position:relative;
7.空元素高度bug,影响版本ie6/ie7,有layout的空元素获得了高度
<div></div>div {
background: blue;
width: 100%; /* to give “layout”  */
}
解决办法:
div {
height: 0;
overflow: hidden;
background: blue;
width: 100%; /* this is just what we originaly had as “layout” giver */
}
8.表单元素双margin bug,影响版本ie6/ie7,input和textarea或许会继承父元素的水平的margin
具体请看http://haslayout.net/css/Form-Control-Double-Margin-Bug
9.ie7的1px dotted 边框变成dashed边框的bug,影响版本ie7, 当设置了1px dotted边框后,有一个边框的宽度大于1px
的话其它为1px边框会变为dashed的样式,具体请看http://haslayout.net/css/IE7-1px-Dotted-Border-Appears-As-Dashed-Bug
10.overflow bug,影响版本ie6/ie7,当设置了overflow:hidden或auto的元素,如果子元素设置了相对定位,overflow就不起作用了,
表现的是visible的样式,解决方法是给父元素加一个position:relative;
11.ie7的坏的:hover 绝对定位bug,影响版本ie7, 当子元素设置了absolute并且通过设置left top 等来通过:hover时改变其显
示位置时将会不起作用如果他们不再父元素的可视范围内,解决方法是给其加上margin-left:0%;
12.当:active时Button背景偏移,影响版本ie8,给button设置:active时背景会做偏移,可以通过设置:active时的-ms-background-position-x和-ms-background-position-y来改变这个偏移。
13.:hover边框消失bug,影响版本ie8, 当设置了outline的元素后,再设置:hover的时候,如果设置边框的话,将会不显示
14.百分比padding垂直margin bug,影响版本ie8,当父元素设置了百分比的padding,子元素有垂直的margin的时候,
就好像父元素被设置了margin一样,解决方法是给父元素加一个overflow:hidden/auto
15.待续…
返回顶部