DIV+CSS ’ 目录归档

IE8 only hack只兼容IE8浏览器的CSS hack

一提到IE就非常蛋疼啊,各个版本的CSS和JS兼容问题简直多如牛毛啊,有木有。一不小心就中招了有木有!

今天要提到的就是解决IE8下的CSS only hack:\0/。看起来是不是很神奇?接下来我们来举个栗子:

<style>

.test {

width:200px;

height:200px;

background-color: green; /*非IE浏览器*/

background-color: blue\0; /*IE9+浏览器*/

background-color: red\0/; /*IE8浏览器*/

*background-color: gray; /*IE7-浏览器*/

_background-color: black; /*IE6-浏览器*/

 

}

</style>

<div class="test"></div>

结语:不要以为上述CSS必须一起使用,告诉你,这些都是可以单独拿出来用的,比如你只想对IE8设置CSS hack,那么只需要在css后面加上“\0/”就可以了,方便直接。

IE6 IE7 IE8浏览器下iframe内容无法显示

RT,很奇葩的问题,遇到的童鞋估计也是在本地开发环境下,或者项目没有正式域名只能用IP访问。

通过上面的描述大概大家也知道了问题的原因了吧,不错,那就是iframe在IE低版本浏览器中对localhost、还有IP网址有一种奇葩的兼容问题。例如:

<iframe src=”http://192.168.1.123/iframe.html”></iframe> 或者 <iframe src=”/iframe.html”></iframe>{本地根地址是:http://localhost:8080}

那要怎么解决呢?

其实大部分情况下的解决方法就是:不用管!项目上线后肯定有正式的域名,替换为正式域名后就ok了。例如:

<iframe src=”http://www.xxxxxxx.com/iframe.html”></iframe>

如果想在本地开发环境下也想看到效果,那么我们需要配置一下host,随便将一个域名指向本地,然后通过这个域名来访问。例如:

<iframe src=”http://misc.xxx.com/iframe.html”></iframe>

JS+CSS浮动框架加载连接自适应宽高

很久以前发布在CSDN上的一个简单案例,今天看来非常粗糙,所以下载下来完善了一下,欢迎吐槽!

<!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 content="text/html; charset=gb2312" http-equiv="Content-Type" />
    <meta content="IE=EmulateIE7" http-equiv="X-UA-Compatible" />
    <title>TinTao - 飒易互联</title>
    <style type="text/css">
    *,html{
        padding: 0;
        margin: 0;
    }
    html{
        overflow: hidden;
    }
    </style>
</head>

<body>
    <div class="fbd">
        <iframe id="ibox" src="http://www.saecn.com" frameborder="0" width="100%" height="506"></iframe>
    </div>
</body>
<script src='http://code.jquery.com/jquery-1.10.0.min.js' type="text/javascript" language="javascript"></script>
<script type="text/javascript">
    setFrameH();
    window.onresize = function() {
        setFrameH();
    };
    function setFrameH(){
        var $ibox = $("#ibox");
        var height = $(window).height();
        if (height < 0)
            height = 1;
        $ibox.height(height);
    }
</script>
</html>

在线案例请移动这里:JS+CSS浮动框架加载连接自适应宽高

解决不同主域跨域的问题

在一些项目中可能会遇到不同主域名之间的一些跨域操作,这个时候最蛋疼了,不过不用担心,史上原理最简单的解决方法诞生了,然人一看就懂。
示例:
www.a.com下有a.html和c.html
www.b.com下有b.html

事件回放:www.a.com下a.html,a.html内iframe调用了www.b.com下的b.html,b.html下iframe调用了www.a.com下的c.html,b.html是不无法直接访问a.html的对象,因为涉及到跨域,但可以访问parent,同样c.html的parent可以访问b.html。c.html和a.html同域,是可以访问a下的对象的。parent.parent.js对象!

  看下面实例:

  a.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<iframe src="http://www.b.com/b.html" ></iframe>
<ul id="getText"></ul>
<script>
    function do(t){
        document.getElementById("getText").innerHTML= decodeURI(t);    
    }
</script>
</body>
</html>

b.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<iframe id="myfarme" src="###"></iframe>
<ul id="ct">
<li>这里是内容1</li>
<li>这里是内容2</li>
<li>这里是内容3</li>
<li>这里是内容4</li>
<li>这里是内容5</li>
<li>这里是内容6</li>
</ul>
<script>
    window.onload = function(){
        var text = document.getElementById('ct').innerHTML;
        document.getElementById('myfarme').src="http://www.a.com/c.html?content="+encodeURI(text);
    }
</script>
</body>
</html>

c.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload = function(){
    var text = window.location.href.split('=')[1]
    console.log(parent.parent)
    parent.parent.do(text);
}
</script>
</head>

<body>
ddddddddddd
</body>
</html>

照着这个示例做,很简单不是吗?

纯CSS实现三角形,兼容性良好

今天在网上看到文章介绍了一些CSS实现各种图形的方法,特别记下这个比较实用的CSS三角形的实现方法,纯CSS2,兼容性非常的好,所以分享给大家:

<!DOCTYPE html>
<html lang="zh_CN">
	<head>
  		<meta charset="utf-8" />
		<title>test</title>
		<style type="text/css">
			.test{
				width:0; 
				height:0; 
				border:10px solid; 
				border-color:#666 #fff #fff #fff;
			}
		</style>
	</head>

	<body>
		<div class="test"></div>
	</body>
</html>

适用于下拉菜单三角形提示、按钮、指示性图标等。

[扫盲]css中使用的中文转化码

是不是在CSS文件中定义个性中文字体而烦恼呢?现在就告诉你一个方法吧!

有一种快速获得字体 Unicode 编码的方法,如果你使用火狐的 Firebug 插件,直接在控制台中输入 escape(‘黑体’),就可以得到黑体的 Unicode 编码,但需要经过处理才可以使用到 CSS 文件中来,请看下图所示:

201103171204317592

于此获得到了 “%u9ED1%u4F53″,将其改写为 “\9ED1\4F53″ 即可写入 CSS 文件。

这样或许还是有些小麻烦,那也没关系,芒果这里有一份比较完整的表格,自己查吧。

中文名 Unicode
新细明体 \65B0\7EC6\660E\4F53
细明体 \7EC6\660E\4F53
标楷体 \6807\6977\4F53
黑体 \9ED1\4F53
宋体 \5B8B\4F53
新宋体 \65B0\5B8B\4F53
仿宋 \4EFF\5B8B
楷体 \6977\4F53
仿宋_GB2312 \4EFF\5B8B_GB2312
楷体_GB2312 \6977\4F53_GB2312
微软正黑体 \5FAE\x8F6F\6B63\9ED1\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1

原文转自:http://appwycom.w08.ivip.cn/?p=316

基于jQuery的五子棋等多子棋游戏插件

今天早上一来呢就将多子棋插件版本更新到V0.1.1,主要原因是昨晚回家完了一下,发现这个游戏在某种特定的情况下会失去判断输赢的情况,接下来就列一下这个插件的详细信息:

/******************************************
* 多子棋插件
*
* @作者 :听涛设计
* @版权 :Copyright (c) 2013 听涛TinTao.
* @网址 :http://www.saecn.com
* @更新 : 2013-05-08
* @版本 :Version 0.1.1
*
******************************************/

主要功能:

1.可以实现多子棋游戏效果;

2.可以自由设定多少棋子连成串可以赢;

3.可以设置游戏画布的宽高;

游戏源码已经更新到GitHub:https://github.com/jactorew/wzGame

DEMO可以移步:jQuery五子棋游戏

欢迎大家多多指正多提意见。

游戏缺点:

UI素材来自互联网,没有独立的CSS样式文件,对于修改皮肤比较困难。

return top