div+css--飞飞Asp乐园

div+css--飞飞Asp乐园http://www.ffasp.com/rss/rss.asp微软IE调试工具：SuperPreview for IE(ie6 ie7 ie8调试工具)http://www.ffasp.com/content.asp?newsid=1694之前一直使用IE Developer Toolsbar跟IEtester作为IE的兼容性调试工具，IETester主要用于CSS的调试，而IE Developer Toolsbar用户体验可谓不是一般的糟糕，加上IE Developer Toolsbar经常使自己正常的JS代码变得不正常，所以在IE下兼容性调试的工具没有什么好用的。今天介绍这款SuperPreview for IE则是微软出品的免费IE兼容性调性工具，需要.NET Framework 3.5库支持。1、安装截图：SuperPreview for IE安装截图screen.width-333)this.width=screen.width-333">2、界面Wed, 02 Mar 2011 23:42:38 GMT精选15个国外最流行的CSS框架http://www.ffasp.com/content.asp?newsid=1672 CSS框架通常指的是一些CSS文件的集合，这些文件包括网页的基本布局、表单样式、网格或简单结构、以及样式重置。例如：typography.css 基本排版规则grid.css 基于网格的布局layout.css 通常的布局form.css for 表单样式general.css 更多通用规则虽然对于小的WEB开发项目来说，CSS框架并不一定适用，但是对于规模较大的团队开发项目而言，CSS框架不仅能加快设计开发速度，而且还能有效解决网站改版中带来的诸多麻烦和问题。这里推荐的15款CSS框架是现在国外最流行的CSS框架，希望能对你的开发有所帮助！ 1 . Elements CSS Frameworksscreen.width-333)this.width=screen.width-333">CSS Frameworks Elements 是一个实用的CSS框架。它是为了帮助设计师更快更高效的来写CSS而建立。Elements 已经超越了仅仅作为一个框架，它有自己的项目工作流。它拥有你完成项目所需的所有东西，这也让你和你的浏览者感到愉悦。阅读概述了解更多。 2 . YUI Grids CSS screen.width-333)this.width=screen.width-333">CSS Frameworks YUI Grids基本的YUI网格CSS提供4种预设的页宽、6种预设模板和再分为2、3、4卷的区块的功能。这个4KB的文件可提供超过1000中页面布局组合。更多信息 3 . YAML CSS Framework screen.width-333)this.width=screen.width-333">CSS Frameworks Dirk Jesse的强大的(X)HTML/CSS框架为许多的简单或更复杂的网站项目提供完整的默认模板包。YAML基于网页标准并支持所有现代浏览器。所有的 Internet Explorer的主要渲染漏洞都被解决。YAML 完全支持从5.x到7.0的所有的IE版本。 4 . Blueprint CSSscreen.width-333)this.width=screen.width-333Mon, 10 Jan 2011 12:09:16 GMTCSS2 Media类型使用方法及简介（@Media）http://www.ffasp.com/content.asp?newsid=1671Media Types allow you to specify how documents will be presented in different media. The document can be displayed differently on the screen, on the paper, with an aural browser, etc. Media Type可以让你的文档在不同的媒介上有不同的呈现形式，它们可以是显示器、纸张、发声浏览器等等。Media Types媒介类型Some CSS properties are only designed for a certain media. For example the "voice-family" property is designed for aural user agents. Some other properties can be used for different media types. For example, the "font-size" property can be used for both screen and print media, but perhaps with different values. A document usually needs a larger font-size on a screen than on paper, and sans-serif fonts are easier to read on the screen, while serif fonts are easier to read on paper.一些CSS属性只为某些媒介所设计。举例来说 "voice-family"属性就是为那些只能用听的用户（盲人）设计的。一些其他的属性可以使用在不Mon, 10 Jan 2011 11:58:30 GMT浏览器排版/布局图片下方出现空隙的问题http://www.ffasp.com/content.asp?newsid=1660我们经常在做页面时，在IE6下会发现标签中图片下方会多出大概4像素左右的空隙，但在IE7和IE8以及FF下显示却是正常的：目前发现了几个解决的方法，在万恶的IE6退出市场前，姑且一用：1.最简单的办法就是，把所有标签写在一行中；2.使用display属性解决，在IMG里添加“display:block;”；3.使用vertical-align属性解决，同样在IMG里添加“vertical-align:top;”；4.流氓方法：使用margin-bottom属性解决，添加“margin-bottom: -4px;”；5.使用字体大小解Fri, 15 Oct 2010 04:15:11 GMT使用IE浏览器a链接失效（不能点击）的解决方法http://www.ffasp.com/content.asp?newsid=16591.用png图片做背景时，在IE6下会有灰底。解决方法：是为png加滤镜去除背景，具体代码如下： function correctPNG() { for(var i=0; i<document.images.length; i++) { var img = document.images[i] var imgName = img.src.toUpperCase() if (imgName.substring(imgName.length-3, imgName.length) == "PNG") { var imgID = (img.id) ? "id='" + img.id + "' " : "" var imgClass = (img.className) ? "class='" + img.className + "' " : "" var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " var imgStyle = "display:inline-block;" + img.style.cssText if (img.align == "left") imgStyle = "float:left;" + imgStyle if (img.align == "right&quotFri, 15 Oct 2010 03:35:51 GMT神奇的css属性pointer-events（穿透绝对定位元素去触发下面元素的某些行为）http://www.ffasp.com/content.asp?newsid=1658绝对定位元素盖住链接或添加某事件handle的元素后，那么该链接的默认行为（页面跳转）或元素事件将不会被触发。现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-events的css属性。使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为。<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"/> <title>CSS:pointer-events</title> <style type="text/css"> .overlay1 { width:50px; height:30px; background:gold; position:absWed, 13 Oct 2010 03:50:01 GMT编写跨浏览器兼容的 CSS 代码的金科玉律http://www.ffasp.com/content.asp?newsid=1603原文链接：http://hi.baidu.com/black8/blog/item/00ae96b7396a18f930add166.html 作为 Web 设计师，你的网站在各种浏览器中有完全一样的表现是很多人的目标，然而这是一个永远无法真正实现的目标，很多人认为，完美的跨浏览器兼容并不必要，这样说虽然没错，但在很多情形，一种近似的兼容还是很容易实现的，本文讲的是各种跨浏览器兼容的 CSS 编码准则和技巧。screen.width-333)this.width=screen.width-333">理解 CSS 盒子模型如果你想实现不需要很多奇巧淫技的跨浏览器兼容的 CSS 代码，透彻地理解 CSS 盒子模型是首要事情，CSS 盒子模型并不难，且基本支持所有浏览器，除了某些特定条件下的 IE 浏览器。CSS 盒子模型负责处理以下事情:一个 blcok （区块）级对象占据多大的空间该对象的边界，留白盒子的尺寸盒子与页面其它元素的相对位置CSS 盒子模型有以下准则:Block （区块）对象都是矩形（事实上所有对象都如此）其尺寸由 width, height, padding, borders, 以及 margins 决定如果不设置高度，该盒子的高度将自动适应其包含的内容，加上留白等（除非使用了 float）如果不设置宽度，一个非 float 型盒子水平上将充满其父容器（扣除父容器的留白）处理 block 级对象时，必须注意以下事项:如果一个盒子的宽度设置为 100%，它就不能再设置 margins, padding, 和 borders，否则会撑破其父容器垂直毗邻的 margin 会引起复杂的坍塌问题，导致布局问题（比如两个垂直毗邻的 Block 对象，上面的对象的 bottom-margin 为 40，下面的对象的 top-margin 为 20，则两个对象的间距将是 40，而不是 60 - 译者）拥有相对位置和绝对位置的对象，拥有不同的行为screen.width-333)this.width=screen.width-333">在 Firefox 的 Firebug 中显示的盒子模型理解 block 级和 inline 级对象的区别这个看似简单的问题事如果能透彻地理解，会受益匪浅。下图讲解了 block 级对象和 inline 级对象的区别:screen.width-333)this.width=screen.width-333">下面是 block 级对象和 inline 级对象的基本区别:Block 级对象会自然地水平充满其父容器，因此没有必要为之设置 100% 宽度属性Block 级对象的起始摆放位置是其父容器的左上边界，并顺排在其前面的兄弟 Block 对象的下方（除非设置 float 或绝对位置）Inline 级对象会忽略其宽度和高度设置InWed, 30 Jun 2010 21:23:11 GMT牛人用css3做的特效_机器猫http://www.ffasp.com/content.asp?newsid=1586机器猫 http://knb.im/cssWed, 23 Jun 2010 21:27:33 GMT解决Ie8兼容的超级方法，把ie8变成ie7http://www.ffasp.com/content.asp?newsid=1566IE6、IE7、IE8、FF浏览器的CSS兼容问题，本来ie6跟ff之间的兼容是很容易解决的。加上个ie7会麻烦点，ie8的出现就更头疼了，原来hack ie7的方法又不能用了，怎么办呢？还好，微软提供了这样一个代码：<meta http-equiv="x-ua-compatible" c />把这段代码放到<head>里面，在ie8里面的页面解析起来就跟ie7一模一样的了，所以，基本上可以无视ie8，剩下的代码只需要这样写就可以了background:#ffc; /* 对Sun, 11 Apr 2010 19:24:59 GMT浏览器兼容总结技巧http://www.ffasp.com/content.asp?newsid=1554javascript部分1. document.form.item 问题问题：代码中存在 document.formName.item("itemName") 这样的语句，不能在FF下运行解决方法：改用 document.formName.elements["elementName"]2. 集合类对象问题问题：代码中许多集合类对象取用时使用()，IE能接受，FF不能解决方法：改用 [] 作为下标运算，例：document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]3. window.event问题：使用 window.event 无法在FF上运行解决方法：FF的 event 只能在事件发生的现场使用，此问题暂无法解决。可以把 event 传到函数里变通解决：function functionName (e) { e = e || window.event; ......}4. HTML对象的 id 作为对象名的问题问题：在IE中，HTML对象的 ID 可以作为 document 的下属对象变量名直接使用，在FF中不能解决方法：使用对象变量时全部用标准的 getElementById("idName")5. 用 idName 字符串取得对象的问题问题：在IE中，利用 eval("idName") 可以取得 id 为 idName 的HTML对象，在FF中不能解决方法：用 getElementById("idName") 代替 eval("idName")6. 变量名与某HTML对象 id 相同的问题问题：在FF中，因为对象 id 不作为HTML对象的名称，所以可以使用与HTML对象 id 相同的变量名，IE中不能解决方法：在声明变量时，一律加上 var ，以避免歧义，这样在IE中亦可正常运行最好不要取与HTML对象 id 相同的变量名，以减少错误7. event.x 与 event.y 问题问题：在IE中，event 对象有x,y属性，FF中没有解决方法：在FF中，与 event.x 等效的是 event.pageX ，但event.pageX IE中没有故采用 event.clientX 代替 event.x ，在IE中也有这个变量event.clientX 与 event.pageX 有微妙的差别，就是滚动条要完全一样，可以这样：mX = event.x ? event.x : event.pageX;然后用 mX 代替 event.x8. 关于frame问题：在IE中可以用 window.testFrame 取得该frame，FF中不行解决方法：window.top.document.getElementById("testFrame").src = 'xx.htm'window.top.frameName.location = 'xx.htm'9. 取得元素的属性在FF中，自己定义的属性必须 getAttribute() 取得10. 在FF中没有 parentElement，parement.children 而用 parentNode，parentNode.childNodes问题：childNodes 的下标的含义在IE和FF中不同，FF的 childNodes 中会插入空白文本节点解决方法：可以通过 node.getElementsByTagName() 来回避这个问题问题：当html中节点缺失时，IE和FF对 parentNode 的解释不同，例如：<form><table><input/></table></form>FF中 input.parentNode 的值为form，而IE中 input.parentNode 的值为空节点问题：FF中节点自己没有 remWed, 02 Dec 2009 22:08:52 GMT