摘要：
响应的web设计的做法是提高用户的浏览质量，并在不同设备上能够完美的浏览使用，就像大前端推出的D7主题。看看下面美丽的响应的网站布局，通过本文你会在以后的设计中找到响应的web设计的灵感。1.Maryland Craft Beer Festival2.Daniel Vane3.Inspire Conference4.Formfett5.Forefathers Group6.Design Week Portland7.Humaan8.These Are Things9.Andersson-Wise Architects10.CaféEvoke11.Stephen Caver12.Rya 阅读全文
随笔分类 - css以及浏览器兼容性
【css】响应式布局入门【转】
2013-06-23 23:03 by sniper007, 411 阅读, 收藏,
摘要：
最近研究响应式设计框架的时候，发现网上很多相关的属性介绍，却很少有系统的入门级使用的文章，我自己整理了一篇入门知识，并没有什么高深的理论，也不牵扯到框架。目前已经越来越多的站点以及wap站点使用响应式设计，因为大屏幕的移动设备越来越普及。而自适应布局已经无法胜任各种浏览需求。响应式设计的目的是尽可能以最好的布局显示您的数据，以实现用户友好的 Web 页面。css2的时期有一个不是很常用的media type，他拥有比如aural（声音）braille（触摸）print（打印）handheld（移动设备）等等十种媒体类型，（附加媒体类型详细http://www.w3.org/TR/CSS2/me 阅读全文
【css】CSS3 Media Queries 详解【转】
2013-06-23 22:56 by sniper007, 336 阅读, 收藏,
摘要：
说起CSS3的新特性，就不得不提到 Media Queries 。最近 Max Design 更新的一个泛读列表里，赫然就有关于 Media Queries 的文章。同时位列其中的也有前天我刚刚翻译的 IE9, Opacity 和 Alpha 。虽然标题相同，但本文并不是列表上 CSS3 Media Queries 的译文，因为原版有Demo有例子有图片，全文不长而且不难看懂，所以我也就不翻译了。基于自己已经了解到一定程度，所以就打算自己写。CSS2中有已经定义了 Media 的部分，包括类型、组别和规则等。CSS并非为了显示器而创造，而是应用于各种各样的媒体，比如常见的显示器，越来愈多的手持 阅读全文
【css】【转】那些年我们一起清除过的浮动
2012-12-26 13:42 by sniper007, 179 阅读, 收藏,
摘要：
浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局； 恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问，浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。一、清除浮动 还是 闭合浮动 （Enclosing float or Clearing float）？很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨的态度来对待代码，也能更好地帮助我们理解开头的三个问题。1 阅读全文
【css】display 属性
2012-12-26 13:12 by sniper007, 220 阅读, 收藏,
摘要：
定义和用法display 属性规定元素应该生成的框的类型。说明这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。注释：CSS2 中有值 compact 和 marker，不过由于缺乏广泛的支持，已经从 CSS2.1 中去除了。默认值：inline继承性：no版本：CSS1JavaScript 语法：object.style.display="inline"实例使段落生出行 阅读全文
【css】display:inline-block
2012-12-26 13:05 by sniper007, 292 阅读, 收藏,
摘要：
在使用 CSS 实现表现的时候，会经常接触到 display:inline-block 这一属性，无论是初接触 Web 标准还是接触标准已久的朋友，大都会对这一属性感觉很迷惑和模糊。display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但对于这个属性不是所有浏览器都识别。支持的浏览器有：IE8,IE9,IE10,Firefox,Safari,Chrome,Opera。不支持的浏览器：IE6,7或许有朋友会对上面所说的IE6,7 也不支持 display:inline-block 属性，表示疑问或者反对。说：“我在 阅读全文
【IE6】IE6bug之躲猫猫bug（peek-a-boo）bug
2012-12-04 22:15 by sniper007, 489 阅读, 收藏,
摘要：
IE6的躲猫猫bug（peek-a-boo）bug，之所以起这个名称是因为在某些条件下文本看起来消失了，只有在重新装载页面时才再度出现。出现这个bug的条件是：一个浮动元素后而跟着一些非浮动元素，然后是一个清理元素，所有这些元素都包含在一个设置了背景颜色或图像的你元素中。如果清理元素扩展了浮动元素，那么中间的非浮动元素看起来消失了，隐到了父元素的背景颜色或图像后面，只有在刷新页面时才重新出现。IE6的躲猫猫 示意图如下： 幸运的是，有许多方法可以解决这个bug。 最容易的方法可能是去掉父元素上的背景颜色或图像。 但是，这常常是不可行的。另一个方法是避免清理元素与浮动元素接触。如果窗口元素应用. 阅读全文
【IE6】IE6 BUG之裁切BUG（Guillotine Bug）
2012-12-04 21:44 by sniper007, 231 阅读, 收藏,
摘要：
裁切 BUG（Guillotine Bug）现象：浮动元素内某些链接 hover 时，该元素的底部会被砍掉。详细介绍：http://www.positioniseverything.net/explorer/guillotine.html触发条件：一个容器元素；在容器内有一个没有被清楚浮动的浮动元素；非浮动的内容在浮动元素之后，并且容器内包含链接；那些链接的a:hover样式改变某些属性；只出现在IE浏览器。参考文档：http://www.planabc.net/2007/03/02/guillotine_bug/ 阅读全文
【css】怪异模式下的盒模型
2012-12-03 14:28 by sniper007, 1858 阅读, 收藏,
摘要：
盒模型的概念就不多说了，说说怪异模式下盒模型的问题： 怪异模式下声明的宽度和高度包含 padding和border在内。因此元素显示出来要比其他浏览器里小。 我一直认为写生先写意，从“意”的角度来讲，盒子模型在IE和其他浏览器中的差异是这个意思（注意一下画作的点睛之笔--夺命诱惑之梦露式美人痣）： 从写实的角度来见，请看具体的例子： 可见，定义好’width’，’height’，’padding’ 还有 ’border’的元素，在IE的兼容性模式里，要比其他浏览器中小。差距还真够大的，常言道：差之毫厘，谬以千里，这何止是毫厘啊，有几公... 阅读全文
【浏览器兼容性】script的type为text/tpl，写入html IE6,7，8下报错
2012-11-19 12:42 by sniper007, 784 阅读, 收藏,
摘要：
script的type为text/tpl，写入html IE6,7，8下报错在IE6，7，8下面报错IE9，10以及其他标准浏览器都没问题 【总结】script的type为text/tpl，除了html IE6,7，8都能读写，而IE6，7，8只能读取，不能写入 阅读全文
【浏览器】浏览器模式与文档模式区别
2012-11-05 15:01 by sniper007, 1071 阅读, 收藏,
摘要：
浏览器模式下的影响：简单来说，“浏览器模式”影响的是浏览器的版本及IE的条件注释，”浏览器模式”会影响服务器端对浏览器版本的判断,主要表现在展现，对CSS影响很大先看看以下的代码：”浏览器模式”为IE7的情况下，字体颜色为红色，其他情况为黑色。这是一段非常简单的IE条件注释代码，在IE7下字体的颜色会被解析为红色，此时我们切换浏览器模式并保持文档模式不变，效果如图：可见，切换”浏览器模式”，对IE的条件注释会有影响。另外，”浏览器模式”对服务器端获得浏览器版本好也会有影响，看下面的代码：这是非常简单的一段JS代码，作用是输出浏览器的版本信息，用于检测浏览器的版本，在不同浏览器模式下效果如图：可 阅读全文
【浏览器兼容性】一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
2012-11-02 17:22 by sniper007, 762 阅读, 收藏,
摘要：
一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10在网站开发中不免因为各种兼容问题苦恼，针对兼容问题，其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题百度源代码如下1 2 3 4 5 6 百度一下，你就知道7 可以打开百度，右键查看源码看下！我们可以看下文件头是否存在这样一行代码！这句话的意思是强制使用IE7模式来解析网页代码！在这里送上几种IE使用模式！8 2. Google Chrome Frame也可以让IE用上Chrome的引擎:9 3.强制IE8使用IE7模式来解析10 11 //或者12 4.强制IE8使用IE6或IE5 阅读全文
【浏览器兼容性】<meta http-equiv=“X-UA-Compatible”content=“chrome=1″/>
2012-11-02 17:08 by sniper007, 602 阅读, 收藏,
摘要：
突然看到有这么一坨，，干啥的呢？于是百度，谷歌“Google Chrome Frame也可以让IE用上Chrome的引擎:” 让IE使用使用chrom引擎，有个前途条件，IE必须安装Google Chrome Frame插件才行，不然不好使，那么，什么是Google Chrome Frame呢？？ 请看下面的一坨Title据Google Chrome博客报道，Google为了争夺IE浏览器的市场份额，推出了一个专门针对IE 6，7，8等版本的浏览器插件Google Chrome Frame，可以让用户的浏览器外观依然是IE的菜单和界面，但用户在浏览网页时，实际上使用的是Google Chrom 阅读全文
【项目中遇到的问题】textarea 在IE下ctrl+z 或者撤销不好使
2012-10-25 16:35 by sniper007, 322 阅读, 收藏,
摘要：
微博发布框，绑定了N多事件，在IE下ctrl+z 或者撤销不好使，没有找到原因，下面的是一个解决方案，但是我试了，特别卡，哎，目前还找不到更好的解决方案 functionfixedCtrlZ($obj){varlog=[];$(function(){vartxt=window.setInterval(function(){if(log[log.length-1]!=$obj.val()){log[log.length]=$obj.val();}},1500);varisCtrl=false;$(document).keydown(function(e){if(e.which===17)isCt 阅读全文
【浏览器兼容性】css解决IE、Firefox兼容的div高度100%的问题
2012-08-23 14:38 by sniper007, 1839 阅读, 收藏,
摘要：
div高度100%的问题其实我们经常遇到，但是一直不知道怎么能够很好的解决。本文就是一个很容易解决IE、Firefox兼容的div高度100%的问题的文章，希望对大家有用。其实解决起来很简单，就是在css的html和body里面加入height:100%属性，div的高度似乎不用设置成100%也可以实现。原理：不同浏览器html和body的默认高度不同，比如IE6下html默认就是100%高度，body则不是；Firefox和IE更高版本下 html和body高度默认都不是100%，需要自定义。chrome浏览器默认也是100%的高度。所以我们需要重新设置一下。代码如下：html,body{h 阅读全文
【css】CSS文档流与块级元素和内联元素
2012-08-21 12:01 by sniper007, 292 阅读, 收藏,
摘要：
下面一句话是百度到的，很通俗就是普通流了。就像你以前用表格布局基本只涉及到文档流，如绝对定位的元素不占文档流，它会忽略文档流的存在而浮在已有东西的上面。如相对定位它占文档流 ，所以定位不好它会覆盖已有的东西。浮动的东西也不占的，只是文档流会围绕浮动的东西。因为div布局要经常用浮动，不浮动不好布局。如一个主div1是文档流，假设里面有（2个浮动div(高100px)），如果你不加清理，或overflow或其他处理方法。因为你的东西在两个 浮动的div里，这时你接个主div2,那它是出现在div1的下面，而不是在100px下，当然ie会自动扩大高度，但其他浏览器可不会。下面是蓝色理想看到的CSS 阅读全文
【项目中遇到的问题】JavaScript 中的跨域访问方法(转)
2012-08-17 11:49 by sniper007, 324 阅读, 收藏,
摘要：
JS中的跨域是受到限制的，但是跨域有时候又是必须的，藉此，各种高手牛人想尽办法使得JS能够跨域获取数据，有的方法真的很巧妙在此记录一下常用的三种跨域方法，如下：一、不同子域名之间的(a.example.com|b.example.com)的跨域访问。 这种跨域调用比较常见，比如a.example.com 下的 a.htm 页面，需要调用 b.example.com 下的 b.htm页面里面的getData函数， 首先需要在a.htm页面中用iframe 框架把b.htm页面引用进来然后同时在a.htm页面与b.htm页面中设置：document.domain = "example.c 阅读全文
【css】三栏，左右两栏固定，中间宽度自适应 ||| 三栏，高度自适应 有图片，高清，无码
2012-08-16 16:53 by sniper007, 323 阅读, 收藏,
摘要：
三栏，左右两栏固定，中间宽度自适应<styletype="text/css">.left{width:300px;float:left;background:#0046a3;height:1000px;border:0;_margin-right:-3px;}.right{margin:0;width:300px;float:right;background:#0046a3;height:1000px;border:0;_margin-left:-3px;}.middle{width:auto;background:#f00;height:1000px;bord 阅读全文
【css】doctype声明、浏览器的标准、怪异等模式
2012-07-30 11:40 by sniper007, 343 阅读, 收藏,
摘要：
群里看到一个面试题，doctype 标准(严格)模式(Standards Mode)、怪异(混杂)模式(Quirks Mode),如何触发，区分他们有何意义？而且据说是笔试题，汗。 现在对做题比较感兴趣，so整理份答案（不保证满分。而且如果我做笔试题，每天打字，很多汉字都写不出了，只能让考官看拼音了。。虽然能答出个一二，但肯定没此文详细了）： 触发标准模式 1、加DOCTYPE声明,比如： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/x 阅读全文
【IE6】iframe在IE6下出现横向滚动条的解决方案
2012-07-05 10:49 by sniper007, 216 阅读, 收藏,
摘要：
最近的项目中，遇到ie6下当iframe出现纵向滚动条时同时会出现横向滚动条。分析了代码，大致的原因是iframe中的页面有相对body的样式包含width:100%的元素。情况如下：（PS：红框表示iframe的区域，灰色的长方框表示上面提到的width:100%的元素，需要在IE6下看效果。）当灰色的框的高度大于iframe的高度时出现纵横向滚动条（IE6下）。当灰色的框的高度小于iframe的高度时效果正常。解决方案一:给内页加上样式：html { overflow-y: scroll; }当灰色的框的高度大于iframe的高度时仅出现纵向滚动条，效果正确。当灰色的框的高度小于ifram 阅读全文
浙公网安备 33010602011771号