xheditor 在firefox 下无法获取$_FILES

最近需要用到xheditor编辑器,看中它的就是上传功能,简单快捷,在使用中发现在firefox下面接收不到上传图片的信息,默认的upload.php可以,在官网论坛发现有跟我一样的问题,解决方法:在ie浏览器下用普通的上传程序即可,在非ie 例如:firefox chrom 等需要用html5 上传才可以。
html5 上传代码:

//html5 上传 应用于非ie 核心的浏览器
if(isset($_SERVER[‘HTTP_CONTENT_DISPOSITION’])&&preg_match(‘/attachment;\s+name=”(.+?)”;\s+filename=”(.+?)”/i’,$_SERVER[‘HTTP_CONTENT_DISPOSITION’],$info)){//HTML5上传
$localName=$info[2]; //上传名称
$ext = mdy::ext_name($localName);
$upload_path = $upload_path_1.$date.’.’.$ext;
file_put_contents($upload_path,file_get_contents(“php://input”));
}else{  //用于ie 浏览器上传

}

完全自定义Firefox浏览器窗口大小的方法

第一步,新建一个书签链接。或是直接随便拖动一个链接到书签栏。

第二步, 给这个书签重命名。这里我们设置为1024*768,当然,你想改成任何其它名字都可以,名称只是为了方便查看每个书签链接的作用。
接下来,就是最重要的一步,在location也就是书签地址中填入 javascript:window.resizeTo(1024,768).然后保存。这样,你只需要点击这个书签链接,你的Firefox浏览器窗口就会调整动1024*768像素的大小。

第三步,同样的道理,你还可以创建800*600,或是其它任何像素,甚至是超出你浏览器窗口的Firefox窗口尺寸大小。

window.moveTo(x, y); // x, y 为新位置的两个坐标值

Firefox的字体设置对某些英文网页不起作用的问题

Firefox允许用户用不同的字体来浏览不同语言的网页,比如我们可以用宋体看中文网页,而用Arial等字体看英文网页。可是,在中文环境里,Firefox的字体设定对有些网页却不起作用 — 比如这个blog的首页, 如果你在中文Solaris中启动Firefox,不论你在字体设定(编辑-首选项-内容-字体-高级)里对[西方]采用何种设置,在Firefox里都看不到变化。而奇怪的是–更改[简体中文]的字体,却可以看到变化。这是Firefox的bug么?

很多人都知道在HTML的开头要用charset声明encoding,但还有一个属性”lang”常常被忽略了。这个”lang”跟charset是不同的,”lang”是用来指定网页的”文本语言“,而同一种语言可以有不同的编码。不过对于中文来说,似乎少了这东西也没多大影响,可能是由于多数中文网页仍然在使用gb2312编码,而Firefox可以通过gb2312来判断出网页的语言是中文。可是,对于utf-8编码的网页,由于utf-8对应多种语言,如果没有”lang”属性,Firefox将无法知道网页使用的是什么语言。这种情况下,Firefox会采用与当前的系统语言–对于中文Solaris就是中文–对应的字体。所以,你改[西方]的设定是无论如何不会起作用的。(另外,也可以把[查看]-[字符编码]改为”ISO-8859-1″来强制使用英文字体 — 如果你实在不喜欢选定的中文字体里的英文)

关于更多细节,请参考:

Internationalization Best Practices: Specifying Language in XHTML & HTML Content

CSS3圆角属性在Firefox,Chrome,Safari的实现

今天在aw那里看到他的博客用了Firefox专有的圆角属性,另外WordPress的后台也使用了,于是我自己也就试一下来用了。目前IE还未 支持圆角属性,IE8我还不清楚支不支持,或许我们以后只要使用border-radius这个CSS3属性就能轻松地在现代浏览器实现这个困扰很多小盆 友的问题了,希望这一天的到来不会太遥远。目前我们已经可以在Firefox,Chrome,Safari实现这个功能了,但他们也还是使用私有属性来实 现,用法上略有区别。

先说一下Firefox的圆角属性:
-moz-border-radius: {1,4} | inherit
如果你想设置四个角都是一样圆角的话,可以像这样子直接设置-moz-border-radius:5px;
也可以单独设置元素的上左、上右、下右、下左四个角的值,分别用-moz-border-radius-topleft、-moz-border- radius-topright、-moz-border-radius-bottomright、-moz-border-radius- bottomleft来设置。
也可以用合并起来一起设置,如我目前的主题暂时设置的-moz-border-radius:5px 0 5px 0;

对chrome、Safari这两个webkit内核的浏览器来说,是用-webkit-border-radius来实现的。
-webkit-border-radius:{1,2} | inherit;
如果你想设置四个角都是一样圆角的话,依然可以像这样子直接设置-moz-border-radius:3px;
如果是单独设置四个角的话,需要采取这种方式

-webkit-border-top-left-radius:5px 10px;
-webkit-border-top-right-radius:5px 10px;
-webkit-border-bottom-right-radius:5px 10px;
-webkit-border-bottom-left-radius:5px 10px;

如果是要合并的话,只支持-webkit-border-radius:3px;或者是这样子-webkit-border-radius:3px 4px;使用-webkit-border-radius:5px 0 5px 0;将不会有任何效果。

著名皮肤制作人utom总结了圆角属性不同浏览器下的运用

-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

对IE6、IE7、FF兼容性的详细CSS HACK介绍

现在我大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致页面没按要求显示!搜索了一下,找到一个针对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。

现在写一个CSS可以这样:
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */

那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999,他们都互不干扰。我真希望那个IE6快点退休……

css Hacks,css样式表补丁.用于修正XHTML编码设计的网页模板布局,某些层的溢出问题,HACKS出处:www.webdevout.net,这个CSS补丁(hacks)很简单,在样式表中单独为ie7设置某个元素,id或者class前面这样写:

*:first-child+html #ID{}

或者

*:first-child+html .class{}
别忘掉了前面的*,这个hacks使得DIV+CSS网页模板在ie5+,ie6,ie7,firefox 1.5,firefox 2的浏览器中都可以完美体现原始布局,而不会出现层溢出等问题.

IE7 修复了很多 bug,也增加了对一些选择符的支持,所以现在诸如 *html {} 和 html>body {} 等针对 IE 隐藏或显示的 hack 都会在 IE7 中失效。虽然 CSS Hack 不推荐使用,条件注释才是万无一失的过滤器,但是条件注释只能出现在 HTML 中,CSS Hack 还是有用武之地的。Nanobot 发现了一些针对 IE7 的 CSS Hack,具体就是:

>body
html*
*+html

这三种写法,其中前两种都是不合法的 CSS 写法,在标准兼容浏览器中被被忽略,但是 IE7 却不这么认为。对于 >body ,它会将缺失的选择符用全局选择符 * 代替,也就是将其处理成了 *>body,而且不光对于 > 选择符,+,~ 选择符中这个现象也存在。对于 html* ,由于 html 和 * 之间没有空格,所以也是一种 CSS 语法错误,但 IE7 不会忽略,而是错误地认为这里有一个空格。对于第三种 *+html,IE7 认为 html 前面的 DTD 声明也是一个元素,所以 html 会被选中,这三种方法中只有这一种方法是合法的 CSS 写法,也就是说可以通过校验器的验证,因此也是作者推荐的 hack 用法。

最后作者给出了最佳方式:

IE 6 and below
Use * html {} to select the html element.
IE 7 and below
Use *+html, * html {} to select the html element.
IE 7 only
Use *+html {} to select the html element.
IE 7 and modern browsers only
Use html>body {} to select the body element.
Modern browsers only (not IE 7)
Use html>/**/body {} to select the body element.

The IE7 CSS Hack(!important在ie7.0的hack方法)

由于ie对!important识别存在bug,而现在大部分网页标准设计师又通过这个bug来兼容ie和ff,但是ie7.0把这个bug给修复了,所以问题又出现了,怎么兼容ie.7.0的同时又能兼容ie6.0和ff?正所谓"上有政策,下有对策",国外的网页标准设计师通过使用css filter的办法(并不是css hack)来兼容ie7.0,ie6.0和ff,以下为作者从国外网站的翻译.

新建一个css样式如下:
插入代码:

#item {
width: 200px;
height: 200px;
background: red;
}

新建一个div,并使用前面定义的css的样式:
插入代码:

<div id="item">some text here</div>

在body表现这里加入lang属性,中文为zh:
插入代码:

<body lang="en">

现在对div元素再定义一个样式:
插入代码:
[/code]
*:lang(en) #item{
background:green !important;
}
[/code]
这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式:
插入代码:

#item:empty {
background: green !important
}

:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上,并在以下浏览器和操作系统下通过测试:

ie7 beta 2 preview/win
ie5.01+/win
firefox 1.5/win
opera 8.5/win & linux
netscape 7.01, 8/win
mozilla 1.7.12/win & linux
safari 2/mac
firefox 1.0.4/linux
epiphany 1.4.8/linux
galeon 1.3.20/linux

Screenshot of the IE7 css hack in IE7

Screenshot of the IE7 css hack in Firefox 1.5

按照远作者的说法其实这不能算是一种hack,应该属于filter,不过这似乎并不是最重要的,因为通过这个办法,我们又一次了解决IE6.0,IE7.0和其他浏览器之间的兼容性问题,而且使用:lang-filter这办法,在今后的一段时间内都会有用.
 

iframe自适应高度只需一个方法轻松实现 兼容IE6、IE7、fireFox

iframe自适应高度的轻松实现(只需一个方法) 兼容IE6、IE7、fireFox

iframeAutoHeight.html
=============================
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>iframeAutoHeight</title>
<script type="text/javascript">  
function iframeAutoHeight(obj)
{
var id = obj.id;
var subWeb = document.frames ? document.frames[id].document : obj.contentDocument;  
if(obj != null && subWeb != null)
{
    obj.height = subWeb.body.scrollHeight;
}  
}  
</script>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0" bgcolor="#eeeeee">
    <tr>
      <td height="200" align="center">parent table</td>
    </tr>
</table>
<iframe id="ifrID" frameBorder=0 scrolling=no src="iframe.html" width="100%" onload="iframeAutoHeight(this)"></iframe>
</body>
</html>

===========================================
嵌入的iframe.html
===========================================
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>iframe</title>
</head>
<body>
<table width="100%" border="1" cellspacing="1" cellpadding="1">
    <tr>
      <td height="200">table</td>
    </tr>
</table>
<table width="100%" border="1" cellspacing="1" cellpadding="1">
    <tr>
      <td height="200">table</td>
    </tr>
</table>
<table width="100%" border="1" cellspacing="1" cellpadding="1">
    <tr>
      <td height="200">table</td>
    </tr>
</table>
<table width="100%" border="1" cellspacing="1" cellpadding="1">
    <tr>
      <td height="200">table</td>
    </tr>
</table>
</body>
</html>
====================================
说明:
iframe 需要定义id 加入onload="iframeAutoHeight(this)"
页面中需要包含方法
function iframeAutoHeight(obj)
{
var id = obj.id;
var subWeb = document.frames ? document.frames[id].document : obj.contentDocument;  
if(obj != null && subWeb != null)
{
    obj.height = subWeb.body.scrollHeight;
}