分类目录归档:前端相关

js顺序执行与input吸引浏览器焦点的体现

在电子商务的充值、支付等动作时;用户确认订单后,执行提交动作,我们把这个页面称为“订单提交页面”,订单打开一个新的页面跳转至支付平台进行订单的处理,这个页面即为“支付平台处理页面”,而订单提交页面则显示一个遮罩层,提示用户在新页面完成订单且有“已完成支付”与“支付出现问题”两个按钮。

原型图片xx

而现在我就是要实现这样的一个业务流程。待整个业务流程完成后,使用firefox进行测试充值等,一切良好(当然架构,还有开发都没那么快与容易,详细可以再写一篇了)。完成后内部测试,使用各种浏览器,firefox,chrome,ie,360等浏览器进行操作。同事Y提醒在使用ie进行购买时,业务上也没有特别大的问题,但就是在进行确认订单提交动作后,form新页面打开,浏览器焦点在“支付平台处理页面”上面,不过这时“支付平台处理页面”突然最小化失去浏览器焦点;浏览器焦点又再次回到“订单提交页面”的弹出层上面。

很显然功能确实不受影响能正常使用,但是对于用户的体验不好,用户在完成订单提交后,浏览器焦点应该直接在“支付平台处理页面”上,用户可以直接进行支付平台处理操作。而现在用户则必须再次点击“支付平台处理页面”重新获取浏览器的焦点。

只能再次检查代码,这一流程使用的是很简单很原始的逻辑。下面的代码可以直接在IE8及其以下的浏览器(浏览器新打开页面必须是在新窗口的形式,如果是以新标签打开页面则没有这样的问题)中打开点击submit按钮即可出现这样的问题。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input test</title>

<script language="javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script language="javascript" src="http://malsup.github.com/jquery.blockUI.js"></script>
<style type="text/css">

.loginform { width: 400px; height: 200px; border: 1px solid #ccc; margin: 0 auto;}
.message { width: 400px; height: 160px; border: 2px solid #ccc;  display: none; background:#fff;}
.message .i{ width: 80px; height: 20px; margin:10px; display:block; border: 1px solid #ccc;}
h4 { text-align: center; }
</style>
</head>

<body>

<div>
<form action="http://baidu.com" target="_blank" id="goform">
<h4>username:<input type="text" name="name" /></h4>
<h4>password:<input type="text" name="pwd" /></h4>
<h4><input type="button" id="go" name="go" value="submit" /></h4>
</form>

</div>

<div id="message">
<h4>提示信息</h4>
<h4><input type="button" value="ok" /><input type="button" value="no" /></h4>
<!--- <h4><a>ok</a><a>no</a></h4>--> <!-- 解决方法-->
</div>

<script language="javascript">

$(document).ready(function() {

$('#go').click(function(){

$.blockUI({
message: $("#message"),
timeout: false,
onUnblock: false,
css: {
top: '20%',
left: ($(window).width()-400)/2,
cursor: 'pointer',
margin: '0 auto',
background: 'none',
border: 'none'}
});
$('.blockUI').attr('title','点击关闭').click( $.unblockUI );
$('#goform').submit();
});
});
</script>

</body>
</html>

订单form提交的动作主要就是由

$(‘#go’).click(function(){
// 遮罩处理

// 表单提交
$(‘#goform’).submit();
});

这样的代码完成的,以js至上而下的执行流程。首先完成遮罩的处理,然后进行form订单的提交动作。左思右想应该是没什么问题的啊,但是还是如此。

于是开始考虑延时执行form表单提交的动作,意思就是让遮罩处理的动作完成后,在过几秒进行执行。

setTimeout(function(){$(‘#goform’).submit();  }, 10);

再次执行,弹出层正常执行,但因为IE提示安全警告拦截了新页面的弹出。因为IE不认为表单的提交是用户的手动操作,如要顺利弹出需要用户将该站加入允许弹出新页面的列表,这样更加不可取。

进而开始考虑实现浏览器的sleep,即休眠暂停当前线程;确实真的找到了有人实现sleep的东西,这里查看 。不过sleep的核心实现都是循环执行其他代码或者是指定一个时间如果时间到了,则跳出

<script type="text/javascript">
function sleep(milliSeconds){
var startTime = new Date().getTime(); // get the current time
while(new Date().getTime() < startTime + milliSeconds); // hog cpu
}
</script>

不过上面的代码其实并没有让脚本解释器sleep下来,而且有让CPU迅速上到高负荷的附作用。浏览器甚至会在该段时间内处于假死状态。不可取。

在迷惑了半天还是不知道为什么,于是只好请教大牛同事w了。问题简要的说明后,w看过代码后表示按顺序执行是完全没问题的,也进入了我之前的思维,使用setTimeout,更改动作逻辑。同样行不通,最后w注意到弹出层的内容,看到里面有两个input标签;于是就是直接把它改为a标签。再次尝试果然就好了,w说input会自动获取焦点的,而a标签则不会。

在把input替换为a标签后,没有出现这样的情况了。这是为什么呢。在对网页用table选择不同标签时,页面标签都能正常获取到焦点。浏览器加载网页时a与input的焦点获取原理是怎样的?

[转]网页中自定义鼠标样式css cursor属性

原文地址:http://qianxuechao.blog.163.com/blog/static/9181349920112309638218/

今天突然用到cursor属性来自定义用户的鼠标手势,cursor:url(shared/mousedown.cur),pointer; 在firefox 与chrome中都能正常显示,但是ie系列都不行。

搜到一篇文章解释说明ie对cursor不认识相对路径的cur文件,必须要用相对根目录或者是绝对路径才能显示。即cursor:url(/common/skin/shared/mousedown.cur),pointer; 或 cursor:url(“http://www.xx.com/images/skin/mousedown.cur”), pointer;这样。

 

 

属性的值可以是多个,其间用逗号分隔。假如第一个值不可以被客户端系统理解或所指定的光标无法找到及显示,则第二个值将被尝试使用。依此类推。假如全部值都不可用的话,则此属性不会发生作用。光标不会被改变。

标准写法:
cursor: url(images/pen_il.cur),auto; /* windows系统的光标文件存放在 C:\WINDOWS\Cursors */
cursor: url(mouse-notexist.cur), url(vote.gif), auto;

也可:
cursor:url(images/logo_baidu.gif) 100 20,auto; /* 100 20 是cursor 的坐标*/

FF支持jpg、gif、cur等文件,不支持.ani
IE则只支持cur、ani

有的时候我们会用到自定义鼠标指针cursor,当我们将做好了的cur图标放在图片文件夹下面,在CSS文件中写上如下代码:

.setMouse{cursor:url("../images/skin/mouse.cur"), auto;}

却发现图标在IE浏览器中没有正常显示。经过测试,原因找到了,IE不支持在CSS文件中写相对路径的cursor。
解决办法很简单,改成相对根路径:

.setMouse{cursor:url("/images/skin/mouse.cur"), auto;}

或者是绝对路径:

.setMouse{cursor:url("http://www.vpedi.com/images/skin/mouse.cur"), auto;}

yui compressor Error missing variable name identifier is a reserved word

yui compressor 是一个很好用的css、js文件压缩工具。在昨天使用过程中出现了这样的问题。

missing variable name 缺少变量名称,以及接下来的identifier is a reserved word 定义了保留字。google搜索之,在stackoverflow看到这样一篇文章  Javascript YUICompressor error

不过还好提示有行号,31:11 ,31行,看看我这段的代码片段是

[javascript]

var goto = ”; // 第31行
if( location.hash){
goto = location.hash;
}else{
var hash = goto = "index";
hash = ‘#’ + hash;
location.replace( location.href + hash);
jQuery.cookie(‘wall_hash’, ‘index’, {
expires: new Date( 2100, 10, 1),
path: ‘/’
});
}
$.constrDom( goto);

[/javascript]

可以看到关键字是goto

第一回答的即“使用了私有的保留字”链接指向 reserved word 不过并没有看到goto的关键字,不过还是尝试修改了,修改后再次执行 yui compressor后,顺利执行,完成压缩!

再次搜索goto javascript保留字看到了这样的一个表格

可以清楚的看到goto关键确实存在,不过为什么firefox MDN为什么没有写入goto关键字呢?

不过还是自己无知了,对于javascript未来的保留字不是很熟悉,虽然在javascript执行过程中没有问题,但是还是要尽量的规避这些保留字了。

常用的clearfix对于ie8的影响


.clearfix:after { clear: both; visibility: hidden; content: '. '; display: block; height: 0;} /* 加点 与不加点 作用于ie8得区别 */
.clearfix { display: inline-block; }
* html .clearfix { height:1%; } /* 兼容于ie6 或者使用 *zoom: 1; 让ie6自动清除浮动包裹里面的元素 */

如上的clearfix是我常用的清除浮动的代码,用过许多次了,感觉没有什么问题;不过前几天突然发现clearfix在ie8下有特别的显示。demo请点击clearfix_ie8,在firefox、chrome、opera、ie7、ie6都是如下的图形

但是在ie8模式下,你会看到明显的格式区别item之间有大约10px的间隙。

我们知道最初浮动的清除采用的是在浮动的子div同级加空div的方式,即<div style=”clear:both”></div> 这样既可自动撑开父div,达到清除浮动的效果。

而clearfix原理同样如此,after伪类可以在使用clearfix的容器之后新建一个空的容器,这容器高度为0、visibility不可见,clear单独在一行显示,display为块级元素,content包含一个“.”。

after伪类在ie7以上、firefox、chrome、opera等浏览器都支持,但ie6以及ie6内核的其他浏览器都是不支持这个的。所以让ie6支持可以采用


* html .clearfix { height:1%; } /* 兼容于ie6 或者使用 *zoom: 1; 让ie6自动清除浮动包裹里面的元素 */

不过ie8 clearfix多出10px的原因还没说明。我偶然的实验发现,原来问题就在这个content,

content 属性与 :befor 及 :after 伪元素配合使用,来插入生成内容。

该属性用于定义元素之前或之后放置的生成内容。默认地,这往往是行内内容,不过该内容创建的框类型可以用属性 display 控制。

而ie8的10px多出来的,就是content: ‘.’; 这个句点所产生的,所以建议不要加上句点,直接采用content: ‘ ‘;空格即可,修改后的效果clearfix_ie8_2

useless setInterval call (missing quotes around argument?) setInterval 参数错误

在写javascript过程中使用到setInterval时,需要传递一个类似于 main.check()这样的参数时,出现了这样的错误信息。

Firefox错误信息:useless setInterval call (missing quotes around argument?)

ie错误信息: 参数无效,42行。

[javascript]

<script language="javascript">
jQuery.noConflict();
jQuery(function($){
$(document).now();
});

jQuery.fn.extend({

now: function(){
var main = this;
this.extend({
gettime: function(){
var date = new Date();
jQuery(‘body’).html(date.getTime());
}
});
// setInterval( main.gettime(), 1000);    // 错误产生地方
setInterval( function(){ main.gettime() }, 1000);    // 修改为这样既可
}
});

</script>

[/javascript]

解决方法很简单。在网上搜索到的。在很多时候比如setTimeout等这样的参数或者自定义的回调函数调用时,都有可能会遇到这样的问题,

主要是因为“main.method()”这样的格式方法所导致的,无法作为一整个函数体来执行,所以在外嵌套一个function(){ } 匿名函数体,这样就可以正常执行了。

原文地址是:useless setInterval call (missing quotes around argument?)

有关html Object标签播放flash的AllowScriptAccess与allowNetworking 属性 [转]

原文:AllowScriptAccess 与allowNetworking

最近在测试网站api视频播放时,播放器swf上可以支持全屏但是点击却没有效果。还有在视频播放完毕后,播放器直接无反应,没有推荐内容或重播按钮。只好搜索下,找寻结果。

1,AllowScriptAccess

参数:

sameDomain:仅当 SWF 文件和网页位于同一域中时才允许执行外出脚本访问。这是 AVM2 内容的默认值。
never:外出脚本访问将始终失败。
always:外出脚本访问将始终成功。

AllowScriptAccess 参数可以防止从一个域中承载的 SWF 文件访问来自另一个域的 HTML 页面中的脚本。
对从另一个域承载的所有 SWF 文件使用 AllowScriptAccess=”never” 可以确保位于 HTML 页面中的脚本的安全性。

2,allowNetworking

参数:

“all”(默认值)― SWF 文件中允许使用所有网络 API。
“internal”― SWF 文件可能不调用浏览器导航或浏览器交互 API,但是它会调用任何其它网络 API。
“none”― SWF 文件可能不调用浏览器导航或浏览器交互 API,并且它无法使用任何 SWF 到 SWF 通信 API。

可以控制 SWF 文件对网络功能的访问。调用被禁止的 API 会引发 SecurityError 异常。

当 allowNetworking 设置为 “internal” 时,以下 API 被禁止:

navigateToURL()
fscommand()
ExternalInterface.call()

当 allowNetworking 设置为 “none” 时,除了上面列出的那些 API 外,还会禁止以下 API:

sendToURL()
FileReference.download()
FileReference.upload()
Loader.load()
LocalConnection.connect()
LocalConnection.send()
NetConnection.connect()
NetStream.play()
Security.loadPolicyFile()
SharedObject.getLocal()
SharedObject.getRemote()
Socket.connect()

3,allowFullScreen

参数:

启用全屏模式设置为”true”,否则设置为”false”(默认值)

仅当在响应鼠标事件或键盘事件时才会调用启动全屏模式的 ActionScript。如果在其它情况中调用,Flash Player 会引发异常。

在全屏模式下,用户无法在文本输入字段中输入文本。所有键盘输入和键盘相关的 ActionScript 在全屏模式下均会被禁用,但将应用程序返回标准模式的键盘快捷键(例如按 Esc)除外。

当内容进入全屏模式时,程序会显示一条消息,指导用户如何退出和返回标准模式。该消息将显示几秒钟,然后淡出。

如果某个调用方与 Stage 所有者(主 SWF 文件)没有位于同一安全沙箱,则调用 Stage 对象的 displayState 属性会引发异常。

管理员可以通过在 mms.cfg 文件中设置 FullScreenDisable = 1 对浏览器中运行的 SWF 文件禁用全屏模式。

在浏览器中,必须在 HTML 页面中包含 SWF 文件,才能进入全屏模式。

在独立的播放器或放映文件中始终允许全屏模式。

实例代码:

[sourcecode language=”html”]

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="100%" height="100%">
<param name="movie" value="falsh.swf" />
<param name="quality" value="high" />
<param name="AllowScriptAccess" value="sameDomain" />
<param name="allowNetworking" value="all" />
<param name="allowFullScreen" value="true" />
<embed src="falsh.swf" width="100%" height="100%" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash" allowscriptaccess="sameDomain" allownetworking="all" allowfullscreen="true"></embed>
</object>

[/sourcecode]

这么大一串代码记住不容易,可以直接使用dreamweaver新建页面,插入swf 然后自动生成这样的代码,还有ie与非ie的不同参数设置代码。不过常用的就是这么几个了

<param name=”allowFullScreen” value=”true” />   <!– 全屏 –>
<param name=”allowNetworking” value=”internal” />  <!– 调用swf内部api–>
<param name=”wmode” value=”opaque” /> <!– 是否透明 –>
<param name=”PLAY” value=”false” /> <!– 是否自动播放,默认为是 –>
<param name=”LOOP” value=”false” /> <!– 是否循环播放,默认为是 –>

强大的jquery弹出层插件blockUI

之前工作中每次需要用到弹出层时,就满地的找。上次也不例外,也这样了。

不过这次发现了一个好东西,jquery的弹出层插件blockUI。

原文介绍地址:强大的jQuery弹出层插件–BlockUI

blockUI官网:http://jquery.malsup.com/block

blockUI GitHub :

先导入jQuery的库文件(小提示:使用Google服务器的压缩版jQuery库文件加载速度会更快),然后再导入BlockUI的库文件

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="images/jquery.blockUI.js" type="text/javascript"></script>

导入库文件后,就可以调用BlockUI了,BlockUI的调用挺简单的,看下面这段代码

 $(function(){
$(‘#box_btn’).click(function(){   //给box_btn绑定一个鼠标点击的事件
        $.blockUI({    //当点击事件发生时调用弹出层
             message: $(‘#box’),    //要弹出的元素box
             css: {    //弹出元素的CSS属性
                 top: ‘50%’,
         left: ‘50%’,
         textAlign: ‘left’,
         marginLeft: ‘-320px’,
         marginTop: ‘-145px’,
                 width: ‘600px’,
                 background: ‘none’
            }
        });
    $(‘.blockOverlay’).attr(‘title’,’单击关闭’).click($.unblockUI);   //遮罩层属性的设置以及当鼠标单击遮罩层可以关闭弹出层
    $(‘.close’).click($.unblockUI);  //也可以自定义一个关闭按钮来关闭弹出层
});
});

看了上面的代码,其实你会发觉BlockUI的使用很简单,有2个重要的方法分别是调用弹出层($.blockUI)和关闭弹出层($.unblockUI)。

$.blockUI定义了一个message属性的,该属性的值就定义了要弹出的元素,比如要弹出一个id为box的div元素,就可以这样写:message: $(‘#box’),对应了上面的第4行代码。需要注意的是,要弹出的那个元素在弹出之前要将其在页面中隐藏即设置该元素的CSS样式为display:none。

$.blockUI还定义了一个css属性,该属性可以对弹出层的样式进行再定义。细心的同志可能会打开BlockUI的库文件查看,其实在库文件中也默认定义了一个弹出层的样式,如果你在页面中定义的样式效果并不是很理想,最好是看看库文件中的$.blockUI.defaults的CSS属性。

如果你想了解一些BlockUI的更高级的用法你可以去该插件的官网看看说明文档

BlockUI的下载地址是:hhttp://jquery.malsup.com/block/#download

 

 

 

IE6文字溢出的bug

前几日在写一个页面时,碰到了一个ie6的bug,浮动层之间如果有注释,则在最后一个元素的文字内容会溢出。

测试详细代码如下(请用ie6查看):

<!– code  –>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>

<style type="text/css">
body { font-size: 12px; color: #333; font-family: Arial, Verdana, Helvetica, sans-serif; min-width: 1002px; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .clearfix { height:1%; }
.uclearfix { display:block; }
/* end clearfix */

.content-sider { width: 402px; float: left; background: #f2ecec; }
.content-fine-list { width: 392px; padding-left: 10px; }
.content-fine-list .list-item { width: 196px; margin-top: 16px; float: left; }
.content-fine-list .list-item h5  { width: 100%; color: #185d7a; font: 16px Microsoft Yahei; margin: 0; padding: 0;  }
.content-fine-list .list-item .content-item-list { margin: 0; padding: 0; }
.content-fine-list .list-item li { width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.content-item-list { width: 100%; }
.content-item-list li { padding-left: 10px; line-height: 20px; }
.content-item-list li a { color: #77654f; text-decoration: none; }

</style>
</head>
<body>
   
    
      <div class="content-sider"><!– content-paper end –><!– content-video end–><!– content-lecture end –>
       <div class="content-fine-list clearfix">
            <div class="list-item">
              <h5>近距离</h5>
              <ul class="content-item-list">
                <li><a href="#">广东阳江 县委书记“竞选上岗”</a></li>
                <li><a href="#">改革值得肯定 推广还需时日</a></li>
                <li><a href="#"> 走近京沪高铁“大小脑”</a></li>
              </ul>
            </div>
            <!– list-item end –>
            <div class="list-item">
              <h5>天下</h5>
              <ul class="content-item-list">
                <li><a href="#">广东阳江 县委书记“竞选上岗”</a></li>
                <li><a href="#">改革值得肯定 推广还需时日</a></li>
                <li><a href="#"> 走近京沪高铁“大小脑”</a></li>
              </ul>
            </div>
            <!– list-item end –>
            
            <div class="list-item">
              <h5>文汇学人</h5>
              <ul class="content-item-list">
                <li><a href="#">广东阳江 县委书记“竞选上岗”</a></li>
                <li><a href="#">改革值得肯定 推广还需时日</a></li>
                <li><a href="#"> 走近京沪高铁“大小脑”</a></li>
              </ul>
            </div>
            <!– list-item end –>
            
            <div class="list-item">
              <h5>360观察</h5>
              <ul class="content-item-list">
                <li><a href="#">广东阳江 县委书记“竞选上岗”</a></li>
                <li><a href="#">改革值得肯定 推广还需时日</a></li>
                <li><a href="#"> 走近京沪高铁“大小脑” </a> </li>
              </ul>
            </div>
             <!– list-item end –>
          </div>
          <!– content-fine-list end –>
        
      </div>
    
 
</body>
</html>

<!– code end –>

 解决方案:最简单的则是直接去掉 "content-fine-list"里面的子元素的所有"<!– list-item end –>"注释。即去掉浮动元素之间的所有注释。这样这个多出来的字就会自动消失了。。ie6bug 真是多啊。。。

在g里面搜索出来的【IE6的疯狂之四】IE6文字溢出BUG  这篇文章里面有更多的解决方法。不过该lz说得“由注释造成文字溢出,属于IE6的BUG,溢出文字的字数=注释的条数*2-1” 这个我这里测试的不是这个结果,且如果我删除第一个"<!– list-item end –>"后bug就消失了。如同该lz所说的“注释所在位置与溢出位置、区块的浮动以及文字区块的固定宽度有必然联系”。所以什么都不是绝对的具体情况还需要看你的代码结构、样式等。这些内容仅供参考。

ps:该lz的IE6的疯狂系列还是很不错的,需要兼容解决方案的可以去好好看下。

 还有这里:ie6/7下的一些常见兼容问题解决

Dreamweaver5.5或其它版本提示xslTransform.htm错误解决方案

Dreamweaver最近使用时,突然出现问题。

“以下编译器未装载 XSLTTransform.htm有不正确的设置信息” 且编写后保存就会出现这个问题。

在网上找到一个解决方案如下:

C:\Documents and Settings\登入者\Application Data\Macromedia\Dreamweaver 8\Configuration 找到WinFileCache-*.dat

关闭DREAMWEAVER后,删除此文件。重新启动DREAMWEAVER8即可正常使用 [注意设置文件夹选项显示隐藏文件] 。

 

注意:这个文件不一定在Macromedia中,也可能在Adodb下。具体看你的Dreamweaver安装的目录名称。例我的目录是:

C:\Documents and Settings\Administration\Application Data\Adobe\Dreamweaver CS5.5\zh_CN\Configuration

一定要关闭dreamweaver后在删除,否则会无效。

参考文:http://blog.sina.com.cn/s/blog_4919e71701009014.html

ps关于色彩空间管理的一些问题

机器上安装的pscs4 一直有这样的信息提示。

总是没有psd”没有配置文件“。

但在另一台机器上做时,没有这样的信息提示。即默认就是有”配置文件“进行色彩管理的。

具体情况如下图。

(图一)


(图二)

如果你现在用的IE浏览器,则这两张图看不出有什么具体的差别。但如果使用的是ff或chrome,则明显看到”图二“比”图一“更暗一些,如果背景色是用的纯色,那么”图二“则在非ie浏览器上看起来与背景有很大的差别。但实际上两张图在ps中查看背景色都是”#111“,但在ff浏览器下查看“图二”的背景色却是“#080808”,这就是图片色彩的管理问题的原因了。

解决方案:

打开ps->编辑->颜色设置

选择“sRGB IEC…” 或 “显示器RGB…”保存重启ps,在载入原来的psd则不会提示“配置文件”的提示信息了。

 

参考资料:http://zhidao.baidu.com/question/49339252.html?fr=qrl&cid=197&index=4

http://498014668.blog.163.com/blog/static/6919825220112100113573/

 

em和px[转]

原文:em和px

来自 tony博客懒得设计

 

在这系列视觉设计的文章间隙插一篇字体单位的文章。

前文说了,字体单位应该用em而不用px,原因简单来说就是支持IE6下的字体缩放,在页面中按ctrl+滚轮,字体以px为单位的网站没有反应。px是绝对单位,不支持IE的缩放,em是相对单位。
我在调整本blog的时候,发现不仅仅是字体,将行距(line-height),和纵向高度的单位都用em。保证缩放时候的整体性。

怎么将px换成em呢?特地转jorux06年12月的一篇文章,因为中文站用px的太多了,如果你是对代码不敏感的纯设计师,可以向技术人员或者页面制作人员请教:

em是何物?
em指字体高,任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font
-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px,
这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。em有如下特点:

1. em的值并不是固定的;
2. em会继承父级元素的字体大小。

重写步骤:
1. body选择器中声明Font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
简单吧,如果只需要以上两步就能解决问题的话,可能就没人用px了。经过以上两步,你会发现你的网站字体大得出乎想象。因为em的值不固定,又会继承父级
元素的大小,你可能会在content这个div里把字体大小设为1.2em,
也就是12px。然后你又把选择器p的字体大小也设为1.2em,但如果p属于content的子级的话,p的字体大小就不是12px,而是1.2em=
1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em,这个em值继承其父级元素body的大小,也就是16px *
62.5% * 1.2=12px,
而p作为其子级,em则继承content的字体高,也就是12px。所以p的1.2em就不再是12px,而是14.4px。

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明,也就是避免以上提到的1.2 * 1.2=
1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em,
因为此em非彼em,它因继承#content的字体高而变为了1em=12px。


诡异的12px汉字(原因待查)
本人在完成em转换时还发现了一个诡异的现象,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而
是稍大一点。这个问题我已经解决,你只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有
限。阅读本篇的读者还有其他解释吗?

本现象只发生在12px的汉字,英文不存在此现象。你可以在这里下载到此表现此现象的文件。下载后请读者用IE打开sample.htm, 可以看到第一段文字明显长于第二段。然后你可以用编辑器打开style.css,看看究竟发生了什么。解决方法就是把style.css中的62.5%换为63%。演示链接

还可以做哪些改进

为什么还需改进:
1. 你的网站css过于复杂,以至于不知道元素的从属关系,很难重写css;
2. 绝大部分人看了本文之后仍然不会重写css;
3. 很大部分人不知道浏览器可以调整页面的字体大小。

所以你需要一个诸如本站信息框中的字体大小调整控件。
相信本站读者的英语能力,这里就不再罗嗦了,请参看:The Text Changer

 

========

其实就如同作者所说大多数人看过这篇文章后,也不会去改自己页面上的字体。我也是一样。。

可能是习惯了吧。一般在body中使用font-size: 12px; 作为初定义。其子元素都自定义或继承body。

ie6/7下的一些常见兼容问题解决

复制code间的代码到本地直接运行查看。

 

/************************************ code ****************************************/

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>ie bug 解决方案</title>

<style type=”text/css”>
body,div,h1,h2,h3,h4,h5,h6{ font-size: 14px; font-weight: normal; }
body { background: url(http://jietuya.com/pics/allimg/110426/5-110426210211.jpg) 0 -20px repeat;}
*{ margin: 0; padding: 0; }
a {  text-decoration: none; }
ul,li { list-style: none; color: #000; }

#wrap { width: 600px; margin: 0 auto; }
.contain { margin: 20px;  color: #fff;}
.contain h1 { color:#F00;  }
.contain p { width: 500px; margin-top: 10px; color: #fff; line-height: 20px; }
.list1 { margin-top: 10px; width: 200px; }
.list1 li { width: 100%;}
.list1 li span { }
.list1 li.a { background: #ccc; }
.list1 li.b { background: #ff0; }

/* li-position */
.all { width: 340px; height: 120px; margin-top: 30px;  overflow: auto; }
.zone { width: 300px; padding: 10px; color: #666; background: #eee;}
.zone  a { color: #219A44; text-decoration: none; }
.zone  a:hover { text-decoration: underline;  }
.zone li { height: 24px; line-height: 24px; position: relative; }
.zone li span.p { position: absolute; top: 0; right: 0; }

/* ad */
.ad { margin: 20px; width: 400px; height: 40px; line-height: 40px; text-align: center; border: 1px dashed #eee; color: #fff; }
.ad a { color: #fff; background: #219a44; padding: 2px 10px;}
.ad a:hover { background: #22A1D0; }

</style>
</head>

<body>

<div id=”wrap”>
<div class=”contain”>
    <h1>li子元素浮动,但外层不浮动,在ie6/7下li多出3px的间隙问题</h1>
    <ul class=”list1″>
        <li class=”a”>第一行第一行第一行第一行<span>span1</span></li>
        <li class=”b”>第二行第二行第二行第二行<span>span2</span></li>
    </ul>
    
    <p>
        当li中包含子元素时,li则在ie6/7下产生3px的bug<br/>
        网上说产生这个bug的条件是“经过测试发现:li的子元素浮动只是这个bug产生的必要条件,这个bug产生的充要条件是li的子元素浮动并且li设置了以下CSS属性之一:width、height、zoom、padding-top、padding-bottom、margin-top、margin-bottom。”
        <br/>
        但我发现在li中包含子元素时且给li定义了一个weight时,这个bug就被触发了。不需要li的子元素span浮动。<br/>
        解决方案<br/>
        1、给li 加上float: left;li可以设置width、height、zoom。<br/>
        2、li的span设置clear:left|both,这时li不能设置width、height、zoom。<br/>
           li设置clear:left|both,这时 li不能设置width、height、zoom。   <br/>
        3、特别感谢 meimei 的指教,IE6/IE7的这个Bug可以通过给li中的div设置vertical-align:top|middle|bottom解决。太怪异了,只要加上vertical-align的值是三者之一即可。
    </p>
    
    
<br/>

<h1>li元素使用position:relative后,外层div的overflow:auto在ie6、7下无效(即滚动条不会出现)</h1>
<div class=”all”>
    <ul class=”zone”>
        <li><a href=”http://www.jietuya.com” target=”_blank”>截图呀 电影 动漫 电视 MTV 评论</a><span class=”p”>截图呀</span></li>
         <li><a href=”http://www.jietuya.com” target=”_blank”>截图呀 电影 动漫 电视 MTV 评论</a><span class=”p”>截图呀</span></li>
         <li><a href=”http://www.jietuya.com” target=”_blank”>截图呀 电影 动漫 电视 MTV 评论</a><span class=”p”>截图呀</span></li>
         <li><a href=”http://www.jietuya.com” target=”_blank”>截图呀 电影 动漫 电视 MTV 评论</a><span class=”p”>截图呀</span></li>
          <li><a href=”http://www.jietuya.com” target=”_blank”>截图呀 电影 动漫 电视 MTV 评论</a><span class=”p”>截图呀</span></li>
         <li><a href=”http://www.jietuya.com” target=”_blank”>截图呀 电影 动漫 电视 MTV 评论</a><span class=”p”>截图呀</span></li>
    </ul>
</div>   
<p>
解决方案:<br/>
1、外层div加上 position:relative; <br/>
2、去掉li上的position:relative; <br/>
</p>

<br/>

待续>>>

</div>

<div class=”ad”>
小广告
    <a href=”http://www.jietuya.com” target=”_blank”>截图呀 http://www.jietuya.com</a>
</div>

</div>

</body>
</html>

 /************************************ code end **********************************/

 

参考文档:http://jnerish.blog.163.com/blog/static/8805768820103214842564/

ie6中:hover伪类无效的解决办法

今天碰到这样的问题了。在ff、ie7、8下都行,ie6下无效;找到这样一篇文档。

ie6中:hover伪类无效的解决办法

 

第一步:打开记事本 将以下代码粘贴进去并且另存为 hover.htc

<attach event=”ondocumentready” handler=”parseStylesheets” />
<script>

var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
    onhover:{on:’onmouseover’, off:’onmouseout’},
    onactive:{on:’onmousedown’, off:’onmouseup’}
}

function parseStylesheets() {
    if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
    window.attachEvent(‘onunload’, unhookHoverEvents);
    var sheets = doc.styleSheets, l = sheets.length;
    for(var i=0; i<l; i++)
        parseStylesheet(sheets[i]);
}
    function parseStylesheet(sheet) {
        if(sheet.imports) {
            try {
                var imports = sheet.imports, l = imports.length;
                for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
            } catch(securityException){}
        }

        try {
            var rules = (currentSheet = sheet).rules, l = rules.length;
            for(var j=0; j<l; j++) parseCSSRule(rules[j]);
        } catch(securityException){}
    }

    function parseCSSRule(rule) {
        var select = rule.selectorText, style = rule.style.cssText;
        if(!csshoverReg.test(select) || !style) return;

        var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, ‘on$1’);
        var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, ‘.$2’ + pseudo);
        var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
        var affected = select.replace(/:(hover|active).*$/, ”);
        var elements = getElementsBySelect(affected);
        if(elements.length == 0) return;

        currentSheet.addRule(newSelect, style);
        for(var i=0; i<elements.length; i++)
            new HoverElement(elements[i], className, activators[pseudo]);
    }

function HoverElement(node, className, events) {
    if(!node.hovers) node.hovers = {};
    if(node.hovers[className]) return;
    node.hovers[className] = true;
    hookHoverEvent(node, events.on, function() { node.className += ‘ ‘ + className; });
    hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp(‘\\s+’+className, ‘g’),”); });
}
    function hookHoverEvent(node, type, handler) {
        node.attachEvent(type, handler);
        hoverEvents[hoverEvents.length] = {
            node:node, type:type, handler:handler
        };
    }

    function unhookHoverEvents() {
        for(var e,i=0; i<hoverEvents.length; i++) {
            e = hoverEvents[i];
            e.node.detachEvent(e.type, e.handler);
        }
    }

function getElementsBySelect(rule) {
    var parts, nodes = [doc];
    parts = rule.split(‘ ‘);
    for(var i=0; i<parts.length; i++) {
        nodes = getSelectedNodes(parts[i], nodes);
    }    return nodes;
}
    function getSelectedNodes(select, elements) {
        var result, node, nodes = [];
        var identify = (/\#([a-z0-9_-]+)/i).exec(select);
        if(identify) {
            var element = doc.getElementById(identify[1]);
            return element? [element]:nodes;
        }
      
        var classname = (/\.([a-z0-9_-]+)/i).exec(select);
        var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, ”);
        var classReg = classname? new RegExp(‘\\b’ + classname[1] + ‘\\b’):false;
        for(var i=0; i<elements.length; i++) {
            result = tagName? elements[i].all.tags(tagName):elements[i].all;
            for(var j=0; j<result.length; j++) {
                node = result[j];
                if(classReg && !classReg.test(node.className)) continue;
                nodes[nodes.length] = node;
            }
        }  
      
        return nodes;
    }
</script>

 
第二步:在css中写入 body{behavior: url(css/hover.htc);}

这样这个在ie6中的bug就解决了 呵呵

站点当前栏目高亮

用js查找法实现当前栏目样式的高亮显示Woo..

网站栏目高亮,适用于栏目地址不存在外链的情况。

1、获取所有a标签的href属性值

2、用location.href与获取到a href属性值进行匹配。

3、如果不是返回-1,那么则给对应的a标签加上高亮样式。

 

<ul class=”nav-ul” id=”nav”>
            <li><a href=”/”>首页</a></li>
            <li>
                <a href=”/cate1/”>栏目</a>
            </li>

</ul>

<script language=”javascript”>
    var links = document.getElementById(“nav”).getElementsByTagName(“a”);
    for(var i=0;i<links.length; i++){
        if(i==0){
            continue;
        }else{
            var url = links[i].getAttribute(“href”);
            var nowUrl = document.location.href;
            if(nowUrl.indexOf(url)!=-1){
                links[i].className = “nav_bg”;
            }
        }
    }
    
</script>

 

clearfix div flaot 清除

<style type=”text/css”>
.d1{ width:100%; border:1px solid red;}
.d2{ float:left; width:30%; height:20px; border:1px solid blue;}

</style>
<body >

<div class=”d1 clearfix”>
    <div class=”d2″>彩色</div>
    <div class=”d2″>出色</div>
</div>

如想外部div容器自适应高度,被里面的容器撑开;在遇到里面的容器float时,则外部不能有效地撑开。

之前的做法即在里面的容器下面加上<div style=”clear:both”></div>清除浮动即可,但这回多出一个没有实际意义的div容器。

现一个新的做法:用clearfix:after消除 css浮动

在加一段样式:

.clearfix:after{ content:”.”; display:block; height:0; clear:both; visibility:hidden; }
.clearfix{ display:inline-block; }
*html .clearfix{ height:1%; }

 应用ok。

详解:关于clearfix清除浮动

 

utf-8页需引用编码为gb2312的js文件时

utf-8页面需要引用编码为gb2312的js文件时,由于编码不同,出现了乱码。是因为要根据ip来判断城市区域;接口是腾讯的:fw.qq.com/ipaddress  开始的引用方式<script language="javascript" src="http://fw.qq.com/ipaddress" ></script>  alert(IPData[3]); 显示出来的是乱码。

搜索得知,需要这样<script language="javascript" src="http://fw.qq.com/ipaddress" charset="gb2312"></script> 即当utf-8要引用gb2312js文件时;可以对js文件进行charset=’gb2312′ ;反之gb2312调用utf-8js文件时:<script language="javascript" src="http://fw.qq.com/ipaddress" charset="utf-8"></script> ;同样这样的方式也适用gbk编码。

参考:www.wileylee.com/wiley/20100766.html

position属性在li和span结合时的用法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>li span</title>
<style type="text/css">
<!–
body{ font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif;}
ul,li{ margin:0; padding:0; list-style:none; background:#eee; width:300px;}
li { position:relative; padding:0 10px 0 15px; line-height:22px; border-bottom:1px dotted #000;}
a.ll{ color:#666; text-decoration:none;}    
a.ll:link,a.ll:visited { color:#999;}
a.ll:hover{ color:#000;}

li span{ position:absolute; right:0px; top:0;}
li .col a{ color:#090;}
li .col a:hover{ color:#000; }
–>
</style>
</head>

<body>

<ul>
<li><a href="#" class="ll">阿凡达桑忽然间,交换机和</a>   <span  class="col"><a href="#">span</a></span></li>
<li><a href="#" class="ll">阿凡达桑忽然间</a>   <span class="col"><a href="#" >span</a></span></li>
<li><a href="#" class="ll">阿凡达桑忽然间阿萨法的</a>   <span class="col"><a href="#" >span</a></span></li>
<li><a href="#" class="ll">阿凡达桑忽然间阿萨法的</a>   <span class="col"><a href="#" >span</a></span></li>
<li><a href="#" class="ll">阿凡达桑忽然间阿萨法的</a>   <span class="col"><a href="#" >span</a></span></li>
</ul>

</body>

</html>

==
要点:1、li position:relative; span 处于 position:absolute;span内联元素可以随意左右显示。
2、a标签样式应用方法。a.ll{ color:#090}  a.ll:hover{ color:#000}

【转】ie下option不支持onclick事件的处理方法

原地址:fins.javaeye.com/blog/198977

在用option中的onclick触发函数时,ff下一切正常。但到ie下测试一下,却没反应。逻辑语法都没什么错误。就函数里面放一个alert(123);都不能被正常的触发执行。只好baidu了。

解决方法:

下面的代码演示了一种间接实现 option onclick的方法

注意:此方案只适用于 下拉方式的单选select.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>select-option onclick </title>
<script type="text/javascript" >

function simOptionClick4IE(){
var evt=window.event  ;
var selectObj=evt?evt.srcElement:null;
// IE Only
if (evt && selectObj &&  evt.offsetY && evt.button!=2
&& (evt.offsetY > selectObj.offsetHeight || evt.offsetY<0 ) ) {

// 记录原先的选中项
var oldIdx = selectObj.selectedIndex;

setTimeout(function(){
var option=selectObj.options[oldIdx];
// 此时可以通过判断 oldIdx 是否等于 selectObj.selectedIndex
// 来判断用户是不是点击了同一个选项,进而做不同的处理.
showOptionValue(option)

}, 60);
}
}

function showOptionValue(opt,msg){
var now=new Date();
var dt= ((now.getFullYear())+’-‘+(now.getMonth()+1)+’-‘+now.getDate()+
‘ ‘+now.getHours()+’:’+now.getHours()+’:’+now.getSeconds()+’.’+now.getMilliseconds();
var resultZone=document.getElementById(‘reslut’);
resultZone.style.margin="10px";
resultZone.innerHTML=dt +" 时,点击了: " + (opt.text + ‘ = ‘+opt.value);
}

</script>
</head>

<body>

<select  onclick="simOptionClick4IE()" >
<!– 下面的 onclick="showOptionValue( this )" 是为 ff 和 opera而准备 –>
<option value="1" onclick="showOptionValue( this )" >aaaaa</option>
<option value="2" onclick="showOptionValue( this )" >bbbbb</option>
<option value="3" onclick="showOptionValue( this )" >ccccc</option>
</select>

<div id="reslut" ></div>
</body>
</html>

simOptionClick4IE()函数是关键。具体实现不太明白。showOptionValue() 则处理相关操作。

关于css 中的属性 background-attachment

background-attachment  这个css属性表示“设置或检索背景图像是随对象内容滚动还是固定的。”
有三个属性,fixed(固定背景图片) scroll(随着内容而滚动) inherit (继承父标签的此属性)

通常用在textarea元素中。

<form action="" method="post">
<textarea name="MrJin" id="MrJin" cols="" rows=""></textarea>
<input name="Submit" type="submit" value="Submit" />
</form>

#MrJin {
display:block;
width:350px;
height:240px;
background:url(t.jpg) no-repeat 10px 30px;
background-attachment:fixed ;
border:1px solid #06f;
padding:5px;
}

有时候在多行文本框中输入过多的文字时,背景图片会跑到最上面去了,即随着内容而滚动。在ie 6,7 下都存在这样的问题,而ff下则没有。所以要加上background-attachment:fixed ;                     这样就搞定了。

不过,在加上background-attachment:fixed ;  这个样式后,在ff,ie 7下背景图片与ie6下背景图片显示有差别,ff,ie 7下背景会向上显示一些,所以要用到hack了。background-attachment:fixed ;   替换成 background-attachment:inherit;_background-attachment:fixed;  就ok啦。

[转]IE和Firefox的兼容问题 js篇

IE和Firefox的兼容问题

1、Event的问题
在ie中我们可以直接使用event变量,但是在firefox下由于event是局部变量,firefox下我们可以事件绑定到元素上 例如
<input type="button" onclick="doEvent (event)">  
为了同时兼容ie和firefox 通常在函数种通过以下代码获得事件。
var theEvent = window.event||e;
var srcElement = theEvent.srcElement;
if (!srcElement) {
srcElement = theEvent.target;
}

2、滤镜问题
在IE下是用.filters.alpha.opacity
在Firefox下是用.style.opacity
一般是来设置元素的透明度,所以我们一般通过以下代码来解决兼容问题
var IE = navigator.userAgent.indexOf("MSIE")>0? 1: 0;
if(IE)
{
obj.filters.alpha.opacity;
}
Else
{
obj.style.opacity;
}

3、innerText
IE下我们经常使用innerText,但是Firefox不支持此写法,通常我们写成textContent. 它同时兼容IE和firefox,建议大家采用textContent.对于没有html标签的我们也可以采用innerHTML替代。

4、event.srcElement
IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)

5、 parentNode替代parentElement
在IE中我可以通过obj.parentElement获得父元素,但是firex下不支持
因为firefox与IE都支持DOM,所有我们可以采用obj.parentNode来解决。

6、集合类对象问题
IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.
解决方法:统一使用[]获取集合类对象.

7、自定义属性问题
说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.

8、eval("idName")问题

说明:IE下,,可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象;Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象.
解决方法:统一用getElementById("idName")来取得id为idName的HTML对象.

9、变量名与某HTML对象ID相同的问题
说明:IE下,HTML对象的ID可以作为document的下属对象变量名直接使用;Firefox下则不能.Firefox下,可以使用与HTML对象ID相同的变量名;IE下则不能。
解决方法:使用document.getElementById("idName")代替document.idName.最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var,以避免歧义.

10、const问题
说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量.
解决方法:统一使用var关键字来定义常量.

11、input.type属性问题
说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写.

12、event.x与event.y问题

说明:IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,even对象有pageX,pageY属性,但是没有x,y属性.
解决方法:使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.

13、window.location.href问题

说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.
解决方法:使用window.location来代替window.location.href.

14、模态和非模态窗口问题

说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如:var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";

15、frame问题

以下面的frame为例:
<frame src="/xxx.html" id="frameId" name="frameName" />

(1)访问frame对象:
IE:使用window.frameId或者window.frameName来访问这个frame对象.
Firefox:只能使用window.frameName来访问这个frame对象.
另外,在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象.

(2)切换frame内容:
在IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容.

如果需要将frame中的参数传回父窗口,可以在frme中使用parent来访问父窗口。例如:parent.document.form1.filename.value="Aqing";

16、body问题

Firefox的body在body标签没有被浏览器完全读入之前就存在;而IE的body则必须在body标签被浏览器完全读入之后才存在.

例如:
Firefox:
<body>
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
}
</script>
</body>
IE&Firefox:
<body>
</body>
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
} </script>

17、 事件委托方法
IE:document.body.onload = inject; //Function inject()在这之前已被实现
Firefox:document.body.onload = inject();
document.body.onload=new Function(‘inject()’);

18、cursor:hand 和 cursor:pointer
firefox不支持hand,但ie支持pointer
解决方法: 统一使用pointer
19、 FireFox中类似 obj.style.height = imgObj.height 的语句无效

解决方法:
obj.style.height = imgObj.height + ‘px’;

20、ie,firefox以及其它浏览器对于 table 标签的操作都各不相同,在ie中不允许对table和tr的innerHTML赋值,使用js增加一个tr时,使用appendChile方法也不管用。

解决方法:
//向table追加一个空行:
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell);

21、 padding 问题

padding 5px 4px 3px 1px FireFox无法解释简写,必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

22、消除ul、ol等列表的缩进时

样式应写成:list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效,padding属性对FireFox有效

23、CSS透明

IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:opacity:0.6。

24、CSS圆角

IE:不支持圆角。
FF: -moz-border-radius:4px,或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border- radius- bottomright:4px;。

25、CSS双线凹凸边框

IE:border:2px outset;。
FF: -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;
26、ie支持document.all 而firefox 不支持
改用下面三个tag的其中一个来代替document.all
getElementsByTagName("tagName") 可以得到得到所有标签元素的集合
getElementById("idName")          可以按id得到某一元素
getElementsByName("Name")            可以得到按name属性得到某一元素
27、firefox 中使用innerHTML 的方法
<div id="online"></div>
document.all.online.innerHTML; //这种方法在IE中可以使用,但不是标准方法
document.getElementById("online").innerHTML; //这样firefox就能使用innerHTML了
28、eval()与window.execScript()执行脚本
IE、firerox均支持eval(),firefox不支持window.execScript()
解决:统一使用eval()
29、e.button键值有别于event.button,只有3个键值而无组合键值

30、insertAdjacentHTML 和 insertAdjacentText
insertAdjacentHTML 和 insertAdjacentText 是IE下特有的JS,功能非常好用

可惜Firefox 没有这两东东,不过,加上下面的这段的,Firefox下也可以支持这

两个方法了

if(typeof HTMLElement!="undefined" && !HTMLElement.prototype.insertAdjacentElement)
{
HTMLElement.prototype.insertAdjacentElement = function(where,parsedNode)
{
switch (where)
{
case ‘beforeBegin’:
this.parentNode.insertBefore(parsedNode,this)
break;
case ‘afterBegin’:
this.insertBefore(parsedNode,this.firstChild);
break;
case ‘beforeEnd’:
this.appendChild(parsedNode);
break;
case ‘afterEnd’:
if (this.nextSibling) this.parentNode.insertBefore(parsedNode,this.nextSibling);
else this.parentNode.appendChild(parsedNode);
break;
}
}

     HTMLElement.prototype.insertAdjacentHTML = function (where,htmlStr)
{
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var parsedHTML = r.createContextualFragment(htmlStr);
this.insertAdjacentElement(where,parsedHTML)
}

     HTMLElement.prototype.insertAdjacentText = function (where,txtStr)
{
var parsedText = document.createTextNode(txtStr)
this.insertAdjacentElement(where,parsedText)
}
}
31、elementFromPoint

Ie下有elementFromPoint方法,但是firefox没有,可以重写该方法

Document.prototype.elementFromPoint = function(x, y)
{
this.addEventListener("mousemove", this.elementFromPoint__handler, false);
var event = this.createEvent("MouseEvents");
var box = this.getBoxObjectFor(this.documentElement);
var screenDelta = { x: box.screenX, y: box.screenY };
event.initMouseEvent("mousemove", true, false, this.defaultView, 0,
x + screenDelta.x, y + screenDelta.y, x, y,
false, false, false, false, 0, null);
this.dispatchEvent(event);
this.removeEventListener("mousemove", this.elementFromPoint__handler, false);
return this.elementFromPoint__target;
}
Document.prototype.elementFromPoint__handler = function (event)
{
this.elementFromPoint__target = event.explicitOriginalTarget;

     if (this.elementFromPoint__target.nodetype == Node.TEXT_NODE)
this.elementFromPoint__target = this.elementFromPoint__target.parentNode;

     if (this.elementFromPoint__target.nodeName.toUpperCase() == "HTML" && this.documentElement.nodeName.toUpperCase() == "HTML")
this.elementFromPoint__target = this.getElementsByTagName("BODY").item(0);

     //****added this code to check for textboxes and textareas
if ( this.elementFromPoint__target.nodeName=="#document" )//possible textbox or textarea
{
rp = event.rangeParent;
alert("event.rangeParent = " + rp);
if ( event.rangeParent.nodetype == Node.TEXT_NODE )//textbox with a value
this.elementFromPoint__target = event.rangeParent.parentNode.parentNode;
else if ( event.rangeParent.nodeName == ‘div’ )//textbox without a value
this.elementFromPoint__target = event.rangeParent.parentNode;
}
//****end. However this cause permission denied as the rangeParent object appears to be private!

     event.preventdefault();
event.stopPropagation();
}
Document.prototype.elementFromPoint__target = null;

32、mousewheel事件
firefox 没有 mousewheel 事件。可以通过以下方法解决.
<script>
var n=0;
function mwEvent(e)
{
if (!e) e = window.event;
if ( e.wheelDelta <= 0 || e.detail > 0) { n++; }
else { n–; }
window.status=n;
}
if(document.attachEvent){
document.attachEvent("onmousewheel",mwEvent);
}else{
window.addEventListener("DOMMouseScroll", mwEvent, false);
}
</script>

33、IE和FireFox的鼠标滚轮事件
滚轮IE和Firefox的代码不一样:
IE是mousewheel事件,Firefox是DOMMouseScroll事件
事件属性,IE是event.wheelDelta,Firefox是event.detail
属性的方向值也不一样,IE向上滚 > 0,Firefox向下滚 > 0
//滚轮放大或缩小,基于Prototype 1.6
var scrollfunc = function(event) {
var direct = 0;
if (event.wheelDelta) {
direct = event.wheelDelta > 0 ? 1 : -1;
} else if (event.detail) {
direct = event.detail < 0 ? 1 : -1;
}
zoom(direct);
};
Event.observe(document, ‘mousewheel’, scrollfunc);
Event.observe(document, ‘DOMMouseScroll’, scrollfunc); //firefox
34、attachEvent方法

attachEvent方法解释:
attachEvent有2个参数,第一个参数是事件名,第二个参数是事件触发后所响应的方法. Firefox下解决方法是
Object.prototype.attachEvent=function(method,func)
{
if(!this[method])
this[method]=func;
else
this[method]=this[method].attach(func);
}
Function.prototype.attach=function(func){
var f=this;
return function(){
f();
func();
}
}
36 、title替代alt
在firefox和ie尽力都用title,alt在firefox下不起作用

37、iframe中元素访问
IE:var d=document.getElementById("iframeName").document;
FF:var d=document.getElementById("iframeName").contentWindow.document;
在FF中IFRAME的“document”不叫document,改名叫contentDocument, "window"改名叫contentWindow。

转自:blog.163.com/yf_198407/blog/static/51385411200981051753856/