随笔分类 - (X)HTML+CSS
一切遵循标准行事！！
摘要：hasLayout概述Internet Explorer 中有很多奇怪的渲染问题可以通过赋予其“layout"得到解决。John Gallant 和 Holly Bergevin 把这些问题归类为"尺寸臭虫(dimensional bugs)"，意思是这些臭虫可以通过赋予相应元素某个宽度或高度解决。“Layout"是一个 Internet Explorer for Windows的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件、用户事件等。这 种渲染特性可以通过某些 CSS 属性被不可逆转
阅读全文
摘要：你可以用 <meta/> 标签为你的 XHTML MP 文件指定一些常用的 meta 信息. <meta/> 标签应当被包含在 <head></head> 标签之间. WAP 浏览器会忽略它不能理解的 meta 信息. 你可以在一个 XHTML MP 文件中指定任何种类的 meta 信息而不影响页面的显示效果.例如, 你或许想在你的 XHTML MP 文件中加入作者的名字而不在屏幕上显示它.<meta name="author" content="linlin"/>XHTML MP 的缓存控制&
阅读全文
摘要：网页手机wap2.0网页的head里加入下面这条元标签，在iPhone的浏览器中页面将以原始大小显示，并不允许缩放。<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">其中：width - viewport的宽度 height - viewport的高度initial-scale - 初始的缩放比例minimum-scale - 允许用户缩放到的
阅读全文
摘要：同事调试页面的时候发现如果IE没有选择自动编码，那么utf-8的有些页面会在IE下显示空白，即使你习惯性的加入了：<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />产生原因：utf-8用3个字节表示一个汉字，而普通的gb2312或big5是2个。而恰巧IE在解析网页编码时以HTML内的标签为优先，然后再会解析Header内的内容，但FF等其他浏览器相反。正因为这样，当Title里有奇数个全角字符时，IE把utf-8当作两个字节解析时出现半个汉字的情况，这时该半个汉字会和</title>
阅读全文
摘要：IE6下CSS背景图片闪烁的Bug（ie6下的背景图片缓存问题）IE6下的背景图片每次使用都会重新发送请求(非本地)，连一个hover效果时候同样的背景图片仅仅位置不同而已，ie6都会再次发送请求，这个令人崩溃的事情需要解决掉：对于ie来说，filter:expression 很强大，能够实现的功能超级多，但是更对于视效率如生命的程序员来说，它的效率不敢令人恭维，所以有人会用css方法实现ie6下背景图片缓存，但是这种人也就是崇拜微软的强大而已：html {filter:expression(document.execCommand("BackgroundImageCache&quo
阅读全文
摘要：让IE（ie6/ie7/ie8）支持HTML5元素，我们需要在HTML头部添加以下JavaScript，这是一个简单的document.createElement声明，利用条件注释针对IE来调用这个js文件。Opera，FireFox等其他非IE浏览器就会忽视这段代码，也不会存在http请求。 方式一：引用google的html5.js文件，代码内容可以自己下载下来看。 <!–[if lt IE9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script
阅读全文
摘要：移动设备的广泛使用，使许多传统开发者很无奈。一个企业真的既需要一个Web站点又需要一个移动应用程序吗?本文讨论了HTML 5的可移植性以及为什么在所有的移动平台上都可以良好运行的HTML5，CSS和JavaScript应用程序才是未来的趋势。许多开发者已经得出了结论：他们需要把注意力集中在特定的移动平台上——例如iPhone，Windows7或Android。而其他人开始意识到有许多开发工具可以让他们利用现有的技能——不管是HTML，CSS和JavaScript，还是像C或C++那样的现行的编程语言。就像我们在开发者专用的iPhone报告中讨论的那样，那些移动应用程序的工具，被用来建立本机应用
阅读全文
摘要：media type(媒体类型)是css 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。media query(媒体查询)是对media type的一种增强，是CSS 3的重要内容之一。随着移动互联网的发展，media query开始得到大家的重视。media type让我们先了解一下media type，其实这个大家会比较熟悉一点，我们通常会用到的media type会是all 和screen，然后是print，一些网站会专门通过print类型为页面的打印格式提供更友好的界面。其实，media type有很多种：类型解释all所有
阅读全文
摘要：background-position-x(设置背景横向（x轴）位置)background-position-y:(设置背景纵向（y轴）位置)behavior(检索对象的DHTML行为)filter(设置对象滤镜)ime-mode(设置或检索是否允许用户激活输入中文，韩文，日文等的输入法(I)layout-flow(设置内容的流动及方向)layout-grid:(设置或检索复合文档中指定文本字符版式的网格特性)layout-grid-char:(设置或检索应用于对象内容文本的字符网格尺寸)layout-grid-line:(设置或检索应用于对象文本的行网格尺寸)layout-grid-mode
阅读全文
摘要：用text-indent隐藏文字时，在IE6下，发现背景图不见了！原因是给行内元素设置了display:inline-block;的原故。IE6下，display:inline-block只触发了layout，没有inline……改用display:block;肯定是没问题，如果某些特定需求下，block都不能解决时呢，再改用float也是个解决办法。最后还有一个绝招：就是用position:absolute;这个也能触发layout,,,如果以上的都解决不了问题，就试一下这个吧！！如有更好方法记得分享哦！
阅读全文
摘要：Chrome下，设置小于12px字体，显示仍为12px,这个不知道算不算Chrome的BUG，有人说他是人家臣Chrome的人性化设置，因为小于12px的文字会比较难看得清楚，不过有时项目需要设置小于12px的文字大小。不去讨论是否是Chrome的BUG吧，先解决了问题再说！设置：-webkit-text-size-adjust:none;即可解决问题。有人建议在html或bogy里设置，不过我觉得可以自由点，在需要的设置的元素上设置即可。PS：使用该私有属性后，chrome的字体将不能使用放大缩小功能！（页面缩放时可看到！）字体大小用em可否解决问题呢？经测试貌似也不能！！
阅读全文
摘要：火狐和chrome/safari和opera浏览器css属性Mozilla/FireFox支持的css属性（包括标准和非标准）Mozilla/FireFox的扩展属性webkit/Safari支持的css属性（包括标准和非标准）webkit/Safari的扩展属性webkit/Safari的扩展属性中文资料Opera9.5的css支持表
阅读全文
摘要：在过去，网站建设中有一种网页通常被称为WAP网站建设，或WAP站建设。原因是这类网页起源于一个叫WAP的无线协议。WAP能够运行于各种无线网络之上，如GSM、GPRS、CDMA等。WML是无线注标语言（Wireless Makeup language）的英文缩写。支持WAP技术的手机能浏览由WML描述的Internet内容。而如今的小屏幕移动设备，比如手机，都已经具备访问WWW的能力。其内置的浏览器，或是第三方浏览器大多是WebKit引擎。也因此没人再用WML组织WAP站点了，一般都是用HTML+CSS的方式来建设WAP网站。在设计小屏幕移动设备网页时，你可能先得了解这么一些前提：手机屏幕分辨
阅读全文
摘要：网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight 网页被卷去的高：document.body.scrollTop 网页被卷去的左：document.body.scrollLeft 网页正文部分上：wi
阅读全文
摘要：本以为IE 6基本不支持伪类的，不过今天看到:first-letter和:first-line也可在IE 6下使用，于是测试了下，却没看出效果。检查了半天原因，发现:first-letter只能作用于display: block的元素，而我测试的是span，默认为inline元素…此外，IE 6中还有个要注意的问题，由于这个伪类存在连接符，所以后面不能紧跟大括号和逗号等字符，必须用空...
阅读全文
摘要：由于IE6只支持CSS1，IE7对position:fixed的解释行为也不标准（不过可以无视），所以只能绕道解决了。看到很多都是用JavaScript实现的，其实就用CSS也能解决。如果不知道position:fixed的作用，你可以用Firefox之类的浏览器浏览下本论坛的页面，在载入时会有个loading框，而且即使使用滚动条，也仍然会垂直居中显示。详细描述如下：static 没有特别的设定...
阅读全文
摘要：作者：jdjia 来自：蓝色理想原文：http://www.zishu.cn/blogview.asp?logID=773最近很少写CSS了，以后也可能写的会很少了，所以还是想把自已的一些经验能和大家分享一下，希望能给大家一些帮助！这篇文章主要写的提高网页在客户端浏览器的渲染速度的CSS部分，暂时总结了10条。1、*{} #zishu *{} 尽量避开由于不同浏览器对HTML标签的解释有差异，所以...
阅读全文
摘要：转载请标明出处:http://www.yaosansi.com原文：http://www.yaosansi.com/post/1370.html一、单独安装（相对繁琐，不推荐）使用IE6 Green、IE7 Standalone 及IE8 安装文件，分别安装各自的浏览器。安装顺序：1、IE6 Green 2、IE7 Standalone 3、IE8 beta2相关下载地址：IE6 Green：ht...
阅读全文
摘要：一、缩小图片大小当图片很多的时候，减少图片大小是提高下载速度最直接的方法。1. 使用PNG8代替GIF(非动画图片)，因为PNG8在效果一样的情况，图片大小比GIF要小。2. 用fireworks处理PNG图片，在我们产品中很多PNG图片是美工直接用photoshop导出的， 后来让美工用fireworks处理PNG(大概的方式是选择保存为PNG8,删除背景色)。 处理后100K的图片大小基本减少...
阅读全文
摘要：FILTER:progid:DXImageTransform.Microsoft.Gradient使用 语法： filter:progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled,startColorStr=iWidth,endColorStr=iWidth) 属性： enabled:可选项。布尔值(Boolean)。设置或检索滤镜...
阅读全文
浙公网安备 33010602011771号