遇到了传说的ie 6 img 3px的bug

最近在做一个网站,基本上已经算完成,就开始完善细节部分了。

IE6可能是微软最为YD 的一款浏览器了吧,至今还没有退出历史的舞台,尽管google都宣布不在支持它了。

因为该死的ie6,虽死但是牢牢地占据着老大的位置不放,没办法,boss说话了,必须兼容ie6,只好硬着头皮开始了。

IE6呢,bug很多,这就被我遇到了一个img的bug,具体请看大屏幕演示,效果1 效果2

当初很是奇怪为什么呢?在FF就OK的啊 ,换到IE就死翘翘鸟,当初,不明白这是bug,当调试了一天的时候,替换掉所有的东西,才发现img的前后空格在作怪,删掉就能OK了

所以,特此记下,以免以后会忘记。

贴上代码

[cce_html]
<div>
                     <img src="http://www.17css.com/works/images/tree.jpg">
</div>
[/cce_html]

因为img元素在一个div里面,前后有空白的字符,FF会自动和谐掉,而ie6就晕了,所以才会出现,这个bug,在我做的网站里面img是在td里面,同样的出现3px的空隙

在图片的下方出现3px的空白的,看起来非常不和谐,这个只有在ie6才有……..

最为保险的解决方案

1、改变XHTML排版,让 img 的后面紧跟标签(若没有文字的话),如:

<div><img src=”” alt=”” /></div>

而不是:

<div>
<img src=”” alt=”” />
<div>

2、为 img 设置 display:block ;

附上,相关的链接

ie img 3px bug

另外一种3px的bug

IE6 3像素bug的缘起与解决方案

php开发环境搭建

最近因为公司需要,开始学习 php了, 首先得搭建开发环境,网上看了下教程,就开始自己搭建环境了

一般的都是用Dreamweaver进行开发,再下载xampp集成安装环境就行了

安装环境windows xp sp3

准备:

Dreamweaver8下载地址

xampp1.7.3

下载完以后,解压安装,Dreamweaver的安装很简单

主要说下xampp的安装

将下载的文件解压到E盘(以我的系统为例),

php开发环境搭建 step1
php开发环境搭建 step1

解压完成后xampp会弹出一个cmd出来

像下面这样的

php开发环境搭建 step2
php开发环境搭建 step2

xampp的设置界面

php开发环境搭建 step3
php开发环境搭建 step3

全部都直接回车就行了,按照默认的设置

php开发环境搭建 step4
php开发环境搭建 step4

程序 会自动安装相关的脚本

php开发环境搭建 step5
php开发环境搭建 step5

一直等到出现这个画面的时候,

基本环境都已经安装成功了

好了 打开你的浏览器输入

http://localhost

会出现恭喜安装完成的界面

php开发环境搭建 step6
php开发环境搭建 step6

呵呵,为了学习PHP,下载了一个留言板进行研究, 具体下载 见这里

下面说一下Dreamweaver建立一个站点

选择站点->新建站点,切换到高级

php开发环境搭建 step7
php开发环境搭建 step7

设置远程信息

php开发环境搭建 step8
php开发环境搭建 step8

本地信息

php开发环境搭建 step9
php开发环境搭建 step9

ok,现在搭建站点完成了.

有时候觉得Dreamweaver不怎么方便,那就试试 eclipesphp吧.xampp的安装方法同上面一样的

从eclipse官网下载,在这里.下载完以后呢,请参考这里设置java的开发环境,只需要第一步就行了,即 java环境安装.

配置好环境后,直接打开eclipsephp就行了 .

jQuery学习

因为上课的原因 了解到jQuery比较强大 还有ms的asp.net ajax 于是决定开始学习ajax

找到了jQuery的中文入门教程 很不错,讲的东西很多、全面 ,正是我想要的。

开始了第一个著名的Hello world 例子,下载了 Starterkit 、jQuery

修改custom.js 调试出来竟然有错误。仔细看了 下代码 没错啊,怎么出不来呢

百思不得其解,查看错误发现,竟然提示缺少文件 ,再一看根目录,顿时,快要晕了,我竟然没把jQuery.js放在根目录下面,先汗一个。

我们需要一个jQuery的库,最新的下载可以到这里找到

下载初学者包:jQuery Starterkit

下面是在学习中做的笔记 这是我的custom.js

[cce_js]
$(document).ready(function() {
// the first time
//hello world 演示点击链接弹出alert
$("a").click(function(){
//alert("Hello World!");
});
//orderedlist附加red样式
//$("#orderedlist").addClass("red");
//orderedlist的子节点添加样式
$("#orderedlist > li").addClass("blue");
//鼠标滑过最后一行 变绿
$("#orderedlist li:last").hover(function(){
$(this).addClass("green");
},function(){
$(this).removeClass("green");
});
//给orderlist结点的子节点内容添加内容
$("#orderedlist").find("li").each(function(i){
$(this).html($(this).html()+"BAM"+i);
});
//重置单个表单的内容
//$("#reset").click(function() {
//$("#testform")[0].reset();
//});
// 一次性重置对个表单
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
//选择所有li元素,去除了ul子元素 刷新浏览器后,所有的li元素都有了一个边框,只有ul子元素的那个li元素例外
$("li").not(":has(ul)").css("border", "1px solid black");//原文为$("li").not("[ul]").css("border", "1px solid black");
//css()样式用法 另外一个样式
//$("li").not("[ul]").css("border", "1px solid black").css("color","red");
//给所有带name属性的链接加一个背景色 不是很清楚
$("a[name]").css("background-color","#eee");
//进行部分匹配 href属性=#的发生事件
$("a[href*=#]").click(function() {//由于是部分匹配所以#、#bottom是一样的
//alert("href");
// do something with all links that point somewhere to /content/gallery
});
//选择器都用来选择子元素或者是过滤元素。另外还有一种情况是选择上一个或者下一个元素,比如一个FAQ的页面,答案首先会隐藏,当问题点击时,答案显示出来
$('#faq').find('dd').hide().end().find('dt').click(function() {//选择所有的dd元素全部隐藏起来 实现dt的点击事件
var answer = $(this).next();//选择下一个元素 找到dt下面紧接的一个dd元素
if (answer.is(':visible')) {
answer.slideUp("slow",function(){//上移弹出
alert("haha up")});
} else {
answer.slideDown("slow",function(){//下移弹出
alert("haha down")});
}
});
//移到文章某段的链接时,它所在的段全用上highlight样式,移走之后又恢复原样
$("a").hover(function() {
$(this).parents("p").addClass("highlight");
}, function() {
$(this).parents("p").removeClass("highlight");
});//hover(over, out)
//特效 show() hide()函数实现
//$("a").toggle(function() {
//    $(".stuff").hide('slow');
//}, function() {
//    $(".stuff").show('fast');
//});
//特效2
$("a").toggle(function() {
$(".stuff").animate({
height: 'hide',
opacity: 'hide'
}, 'slow');
}, function() {
$(".stuff").animate({
height: 'show',
opacity: 'show'
}, 'slow');
});
//这里还有一些比较好的特效
// generate markup //投票rate
//代码生成了5个链接,并将它们追加到id为"rating"容器中,当其中一个链接被点击时,该链接标明的分数就会以rating参数形式发送到rate.php,然后,结果将以XML形式会从服务器端传回来,添加到容器中,替代这些链接。
var ratingMarkup = ["Please rate: "];
for(var i=1; i <= 5; i++) {
ratingMarkup[ratingMarkup.length] = "<a href='#'>" + i + "</a> ";
}
// add markup to container and applier click handlers to anchors
$("#rating").append( ratingMarkup.join('') ).find("a").click(function(e) {
e.preventDefault();
// send requests
$.post("rate.php", {rating: $(this).html()}, function(xml) {
// format result
var result = [
"Thanks for rating, current average: ",
$("average", xml).text(),
", number of votes: ",
$("count", xml).text()
];
// output result
$("#rating").html(result.join(''));
} );
});
//点击表格的第一行head区域,你可以看到排序的效果,再次点击会按倒过来的顺序进行排列。
//$("#large").tableSorter();
$("#large").tableSorter({
stripingRowClass: ['odd','even'],    // Class names for striping supplyed as a array.
stripRowsOnStartUp: true        // Strip rows on tableSorter init.
});
//郁闷 不知道为什么我的排序插件就是弄不出来  难道排序插件跟上面的代码有冲突?
});
[/cce_js]

总结:

虽然教程内容比较少,但是花了一个下午的时间 效果不怎么明显 下次再继续学习jQuery的plugin 还有自己插件

很显然 教程只是JQuery中一小小部分 还有很多东西 必须掌握 像css、xpath的语法

大量的类似的CSSXPath例子,更多的例子和列表可以在这里找到

你可以在Visual jQuery找到全部的事件列表,在Events栏目下.

更多的AJAX方法可以从这里 找到,或者看看API文档 下面的AJAX filed under AJAX.

很多不错的效果可以访问interface plugin collection. 这个站点提供了很多demos和文档

关于排序插件的更多例子和文档可以在 tablesorter首页找到.

经常更新的插件列表可以从jQuery官方站 on the jQuery site找到.