该分类相关标签

如何在 IE 中使用 HTML5 元素

Sjoerd Visscher 发现了一个简洁的 方法 让样式在 IE 中作用到未知的元素上——仅需 JS 创建此未知元素即可：
document.createElement(elementName)
同理（对于 IE 来说 HTML5 元素即是未知元素），该方法也可顺延到 HTML5 的元素上（详细见：John Resig 写的 《HTML5 Shiv》 一文）：
<html>
<head>
<style>section { color: red; }</style>
<script>document.createElement(”section”)</script>
</head>
<body>
<section>Hello World!</section>
</body>
</html>
在 IE 中，为了更方便使用 HTML5 元素，我们可以引入这样的脚本：
(function(){
// from: http://dean.edwards.name/weblog/2007/03/sniff/
if(!/*@cc_on!@*/0) return;

var html5 = “abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,f... 14 条评论 »

2009-6-13 下午 - HTML/CSS/XML/XSL - -   

影响 reflow 的因素及其优化

如果对于 reflow 这个概念你还不太清楚或者不知道，请先阅读：

《Notes on HTML Reflow》
《What is a reflow?》
《Gecko:Reflow Refactoring》
《reflow》
《形象化的reflow》
《样式的执行效率-reflow》

Yahoo! 性能工程师 Nicole Sullivan 在最新的文章 《Reflows & Repaints: CSS Performance making your JavaScript slow?》 中总结了导致 reflow 发生的一些因素：

调整窗口大小（Resizing the window）
改变字体（Changing the font）
增加或者移除样式表（Adding or removing a stylesheet）
内容变化，比如用户在input框中输入文字（Content changes, such as a user typing text in
an input box）
激活 CSS 伪类，比如 :hover (IE 中为兄弟结点伪类的激活)（Activation of CSS pseudo classes such as [...]

... 9 条评论 »

2009-4-13 下午 - HTML/CSS/XML/XSL - - -   

如何快速定位页面中复杂 CSS BUG 问题

相信大家对于常见 CSS BUG 的处理已经相对比较熟悉，例如：IE6 Three Pixel Gap、IE5/6 Doubled Float-Margin Bug 等等。但时常我们也会碰到复杂的 CSS BUG 问题，所谓“复杂”实质是指触发的条件很复杂，而“BUG” 也并非指一定是浏览器的 BUG 。对于此类问题，我们首先要解决的是如何定位到问题，只有快速的定位到问题，才能更好的解决问题。
对于快速定位，个人的经验处理一般如下（基本可以定位到我在 淘宝 遇到的 90% 以上的复杂 CSS BUG 问题）：
1、检查页面的标签是否闭合
不要小看这条，也许折腾了你两天都没有解决的 CSS BUG 问题，却仅仅源于这里。毕竟页面的模板一般都是由开发来嵌套的，而他们很容易犯此类问题。
快捷提示：可以用 Dreamweaver 打开文件检查，一般没有闭合的标签，会黄色背景高亮。
2、样式排除法
有些... 33 条评论 »

2009-1-14 上午 - HTML/CSS/XML/XSL - -   

按钮在 IE 中两边被拉伸的 BUG

大家在写按钮（input、button）的时候会发现在 IE 下：

随着字数的增多，两边的间距也会越来越大。
在 WIN 的XP 风格下，当字数很多时，两边还会出现严重的锯齿。

到底是什么原因呢？
蓝色理想 原 WEB标准化专栏 的斑竹 zbm2001z 给出了一个答案：
1、IE 在按钮的 value 值每增加 4 个字节（汉字为 2 个）时，就会在按钮的两边产生总共一个字节的内边距宽度。
2、IE 的按钮（XP 风格）默认样式是一个固定尺寸的圆角矩形图片作背景，所以一旦按钮变宽变高后，这个固定尺寸的圆角矩形图片的边缘自然就会出现“拉毛”的现象了。

对于第二个问题我们暂时没办法去解决，除非 WIN 系统自己修复 BUG ，但对于第一个问题 ，我们还是可以修复的。
IE 下给按钮元素设置 overflow 属性的 visible 值（注 ：padding 值仅在设置了over... 27 条评论 »

2008-11-12 下午 - HTML/CSS/XML/XSL - - -   

可以给img元素设置背景图

惊叹于老外的发现 《CSS Background image on html image element?》，自己从没关注过，也没想过如此的问题。
实现方法很简单：设置 img 元素为块元素（display:block;），并赋一个 padding 值。
例如（simple demo ）：
img {
display:block;
background:url(’parallax.gif’) no-repeat bottom left;
padding:93px 100px 75px 100px;
}
根据上面的原理，举一反三，通过类似的方法，我们还可以给 img 元素设置双边：
img {
display:block;
padding:1px;
background:red;
border:1px solid black;
}

... 37 条评论 »

2008-9-27 下午 - HTML/CSS/XML/XSL - -   

Google Chrome 浏览器支持的 CSS 选择器

Google Chrome 浏览器是基于 Safari 正在使用的 Webkit 引擎，使用的版本是 AppleWebKit/525.13 。不过 Safari3.1 使用的是最新版本：AppleWebKit/525.18。
那 Google Chrome 浏览器对 CSS 选择器的支持又如何呢？感谢 Engage 公司的女前端开发工程师 Estelle 测试整理的《Google Chrome Browser CSS Selector Support》：http://www.evotech.net/blog/2008/09/google-chrome-browser-css-selector-support/

... 24 条评论 »

2008-9-4 下午 - HTML/CSS/XML/XSL - - -   

position:relative 的使用限制

在 W3C 规范中 position 是可以使用在任何元素上的，但 position:relative 却有部分例外：
The effect of ‘position:relative’ on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
经测试，在浏览器（IE 除外）中给 table 定义 position:relative 属性是无效的。如果的确需要在表格中使用该属性，建议在单元格中嵌套一个 div 元素，再在其上设置 position:relative 属性来模拟。

... 16 条评论 »

2008-8-13 上午 - HTML/CSS/XML/XSL - -   

XHTML1.1 Tags List

http://ore.to/htmllint/tagslist.cgi?HTMLVersion=XHTML11

... 2 条评论 »

2008-7-31 上午 - HTML/CSS/XML/XSL - -   

line-height 属性的继承问题

淘宝商城的 detail 页面“产品详情”部分是商家自定义区块，曾出现这样一个问题：
<style type=”text/css”>
p {
line-height:17px;
}
</style>

<div class="mdse-detail">
<p>
<strong style="font-size:30px">
品牌：XZX<br />
市场价：145元<br />
[...]

... 17 条评论 »

2008-7-25 下午 - HTML/CSS/XML/XSL - -   

如何给 legend 标签设定宽度

我们在做表单的时候经常会使用到这样的结构：
<fieldset>
<legend>哪些浏览器legend标签设定的宽度有效</legend>
<input type=”checkbox” value=”ie6″ name=”width” id=”ie6″ checked=”checked” /><label for=”ie6″>IE6</label>
<input type=”checkbox” value=”ie7″ name=”width” id=”ie7″checked=”checked” /><label for=”firefox”>IE7</label>
<input type=”checkbox” value=”firefox2″ name=”width” id=”firefox2″ /><label for=”firefox2″>Firefox2</label>
<input type=”checkbox” value=”firefox3″ name=”width” id=”firefox3″ /><label for=”firefox3″>Firefox3</label>
<... 11 条评论 »

2008-7-24 下午 - HTML/CSS/XML/XSL - -   

1 / 6123456下一页»