IT博客-asfman-文章分类-div css dhtml

format block context

汪杰 — Thu, 27 Oct 2011 03:06:00 GMT

环绕：
<div style="position: absolute; left: 500px; top: 20px; border: 1px solid red; padding: 10px; width: 300px;">

                    <div style="float: left; width: 100px; height: 100px; background: gray; margin-right: 10px;">imgdiv>
                    <div style="">
我要实现左上角是图片，然后就是文字环绕在图片的右边，像下面的效果图一样。我要实现左上角是图片，然后就是文字环绕在图片的右边，
像下面的效果图一样。我要实现左上角是图片，然后就是文字环绕在图片的右边，像下面的效果图一样。我要实现左上角是图片，然后就是文
字环绕在图片的右边，像下面的效果图一样。我要实现左上角是图片，然后就是文字环绕在图片的右边，像下面的效果图一样。我要实现左上
角是图片，然后就是文字环绕在图片的右边，像下面的效果图一样。
                    div>
            div>

不环绕：

<div style="position: absolute; left: 500px; top: 320px; border: 1px solid red; padding: 10px; width: 300px;">
                    <div style="float: left; width: 100px; height: 100px; background: gray; margin-right: 10px;">imgdiv>
                    <div style="overflow: hidden; zoom: 1;">
我要实现左上角是图片，然后就是文字环绕在图片的右边，像下面的效果图一样。我要实现左上角是图片，然后就是文字环绕在图片的右边，
像下面的效果图一样。我要实现左上角是图片，然后就是文字环绕在图片的右边，像下面的效果图一样。我要实现左上角是图片，然后就是文
字环绕在图片的右边，像下面的效果图一样。我要实现左上角是图片，然后就是文字环绕在图片的右边，像下面的效果图一样。我要实现左上
角是图片，然后就是文字环绕在图片的右边，像下面的效果图一样。
                    div>
            div>

In order to become a skilled CSS developer, you need to understand the underlying concepts of CSS that make it work and not just how to produce certain visual effects. The "block formatting context" is one of those concepts that drives how CSS affects your page without you even knowing it.

The easiest way to think about a block formatting context is as an isolated container that controls the layout of the boxes within it without regard for elements outside of it. For instance, when you float a div, it establishes a new block formatting context. Nothing inside the float will interact with anything outside the float.

But not every div establishes a new block formatting context, nor are divs the only elements that can establish them. Any block element can establish a new block formatting context if it has one of the following property/value pairs set on it:

float: left
float: right
position: absolute
display: inline-block
display: inline-table
display: table-cell
display: table
overflow: auto
overflow: scroll
overflow: hidden

This is all well and good, but what's the point of setting a new block formatting context? Most of the time, you don't need to worry about it, it's just something that's going on behind the scenes that you don't need to get involved with. Sometimes, however, the lack of a new context can make elements interact in undesirable ways. The primary reason for setting a new context is to keep cleared elements inside a main content div from clearing floated sidebars. We'll use this problem as a case study for how to establish new block formatting contexts and to see what their effect is on the other elements around them.

http://www.communitymx.com/content/article.cfm?cid=6BC9D#

汪杰 2011-10-27 11:06 发表评论

转：修复IE6下LI元素的几点BUG

汪杰 — Mon, 10 May 2010 10:28:00 GMT

CSS: 修复IE6下LI元素的几点BUG

话说现在都在抵制IE6，对于做前端的人来说这东西也着实可恶，但悲哀的是它楞是深得民心。刚在GA里面查了下统计，在IE的各版本中仍占4成多，所以为了照顾这部分人，还不得不深入虎穴，忍着痛恨研究丫王八羔子的各种HACK。

关于LI在IE6里面的一些诡异的表现一直令我很纠结，遂今天专门抽时间仔细研究了一番，总算摸到些头脑。各位看官请看下图：

上图是我想要的最终显示结果。其结构如下：

<ul>
	<li class="li1st">
		<p>第一个LI元素</p>
		<div class="smallbox">Smallbox</div>
		<div class="box">
			<p>第一个LI元素中嵌套的BOX</p>
			<div class="smallbox">Smallbox</div>
		</div>
	</li>
	<li class="li2nd"><p>第二个LI元素</p></li>
	<li class="li3rd"><p>第三个LI元素</p></li>
</ul>

转XHTML CSS 常见问题和解决方案

汪杰 — Mon, 10 May 2010 10:28:00 GMT

XHTML CSS 常见问题和解决方案

1、如何定义高度很小的容器？

在IE6下无法定义小高度的容器，是因为有一个默认的行高。
列举2种解决方案：ovoverflow:hidden ¦ line-height:0

2、图片下方出现几像素的空白间隙？

这个也有多种解决方案，如将img定义为display:block,或定义父容器为font-size:0，个人更推荐使用vertical-align的方式，它的值可以是text-top ¦ text-bottom ¦ middle等

3、IE6双倍margin的BUG?

display:inline

4、文本垂直方向对齐文本输入框？

设置input为vertical-align:middle，textarea也是如此

5、为什么在web标准下ie无法设置滚动条的颜色？

将设置滚动条颜色的样式定义到html标签选择符上即可

6、如何让层在falsh上显示？

不可以，除了少数几个级别很高的家伙除外。
但可以将flash设置为透明，这时层就会透过falsh显示，近似于覆盖在flash之上了，如：

7、如何使得文字不换行？

定义包含文字的容器为：width:xxx;white-space:nowrap;

8、ie中如何让超出宽度的文字显示为省略号？

定义容器为：overoverflow:hidden;width:xxx;white-space:nowrap;text-overflow:ellipsis;

9、如何在点文字时也选中checkbox?

测试

10、一个div为margin-bottom:10px，一个div为margin-top:5px，为什么2个div之间的间距是10px而不是15px?

这种情况浏览器会自动进行margin重叠，只显示较大的margin值
解决方案：只设置其中一个div的margin为15px

11、如何解决ie下当li中出现2个或以上的浮动时，li之间产生的空白间隙？

设置li的vertical-align，值可以为top ¦ text-top ¦ middle ¦ bottom ¦ text-bottom

12、如何使得英文单词不发生词内断行？

word-wrap:break-word;

13、为什么被访问过的链接颜色没有变化？

定义链接的样式时，需要按照:link,:visited,:hover,:active这样的顺序，可以使用LoVe HAte（喜欢讨厌）来记忆

14、单行文本如何垂直居中？

height:xxx;line-height:xxx; 高和行高相同即可

15、已知高度的容器如何在页面中水平垂直居中？

参阅：http://blog.doyoe.com/article.asp?id="74"

16、未知尺寸的图片图如何水平垂直居中？

参阅：http://blog.doyoe.com/article.asp?id="159"

17、标准模式和怪异模式下的盒模型区别？

标准模式下：实际宽度 = width + padding + border
怪异模式下：实际宽度 = width - padding - border

18、如何解决IE下的3像素BUG?

参阅：http://blog.doyoe.com/article.asp?id="68"

19、如何做1像素细边框的table?

方法1：设置table的border-collapse:collapse;

测试

方法2：关键在于设置cellspacine="1"，用间隙来作为边框

测试

20、以图换字的几种方法及优劣分析

以图换字，其实是为了保证页面的可读性，这样既有利于搜索引擎，又有利于结构查看。由于这种方式被大多数人所认同，所以方法也越来越多：

方法1：使用text-indent的负值，将内容移出容器；
方法2：使用display:none，将内容隐藏；
方法3：使用padding将文字挤出容器之外，并将超出的部分hidden;
方法4：使用font设置超小字体，达到隐藏内容的目的。

方法1（非常不推荐）看起来蛮简单，但其实有几个不理想的地方，1是比较吃资源；2是在ie5下面会出现滞后背景无法显示；3是内容为超链接时，长长的黑色虚框，让你抓狂。
方法2（不推荐）其实倒也不复杂，只是需要多添加一个标签，比较浪费；且display:none出现的几率太多，对seo也是会有些许影响的。
方法3（推荐）Standard Model下要2层标签才能搞定，不过相对方法1和2还是有优势的，推荐一下。
方法4（强烈推荐）只需要将字体设置为0，然后overflow:hidden;如font:0/0 arial;overflow:hidden;就同样可以达到隐藏内容的目的，暂时还没发现有什么副作用，强烈推荐。

21、如何容器透明，内容不透明？

假设在标准模式下有如下结构：

我不要透明

IE only的方法：在父容器outer被设置为透明后，只需要将子容器inner设置为position:relative; 如果需要兼容其它浏览器，则以上的方法不适用，且结构也需改为：

我不要透明

然后使用position + z-index搞定位置

22、如何去掉链接的虚线框？

IE下：
FF下:a{outline:none;}

23、如何使得页面字体行距始终保持n倍字体大小为基调？

在body内设置line-height:n即可，注，不可以为它加上单位
原因可参阅：http://blog.doyoe.com/article.asp?id="195"

24、如何使用标准的方法插入flash?

25、Standard Model如何让容器可以height:100%？

设置html,body{height:100%;margin:0;}

26、如何使得表格的宽度固定?

设置table为table-layout:fixed;这时表格将使用固定布局算法，多出的内容将不影响表格的宽度

27、如何让min-height兼容ie6?

.min-height{min-height:100px;_height:100px;}

我是兼容的min-height

28、如何让鼠标变成手型且兼容所有现代浏览器？

cursor:pointer

29、如何实现ie6下的position:fixed?

参阅：http://blog.doyoe.com/article.asp?id="188"

30、IE下如何对Standard Mode与Quirks Mode进行切换？

IE6以下的浏览器不用触发，直接以Quirks Mode呈现页面。

IE6和IE7都可以触发的（在XHTML 的DTD申明前加上HTML注释）：

IE6的触发（在XHTML 的DTD申明前加上XML申明）：

当没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用Quirks Mode呈现。

31、如何给一个元素定义多个不同的css规则？

测试

如上例，该元素同时拥有a和b定义的样式规则。
多个规则之间使用空格分开，并且只有class能同时使用多个规则，id不可以

32、如何区别display:none与visibility:hidden?

相同的是display:none与visibility:hidden都可以用来隐藏某个元素；
不同的是display:none在隐藏元素的时候，将其占位空间也去掉；而visibility:hidden只是隐藏了内容而已，其占位空间仍然保留。

汪杰 2010-05-10 18:28 发表评论

fk ie6

汪杰 — Mon, 10 May 2010 10:05:00 GMT

当ie6 仅用overflow: hidden;去清除浮动时会发生莫名的问题，fk实例：容器里的a标签hover改变背景时，引起容器padding发生改变

汪杰 2010-05-10 18:05 发表评论

IF条件注释有哪些？

汪杰 — Fri, 19 Mar 2010 03:30:00 GMT

IF条件注释有哪些？

除IE外都可识别
除IE6外都可识别
除IE6外都可识别
除IE7外都可识别

解释

lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ：就是不等于的意思，跟javascript里的不等于判断符相同

注意：

1、条件注释只能用于Explorer 5+ Windows(以下简称IE)(条件注释从IE5开始被支持)。如果你安装了多个IE，条件注释（Conditional comments）将会以最高版本的IE为标准。

2、条件注释只能在windows Internet Explorer(以下简称IE)下使用，因此我们可以通过条件注释来为IE添加特别的指令。

3、通俗点，条件注释就是一些if判断，但这些判断不是在脚本里执行的，而是直接在html代码里执行的，比如：

4、条件注释的基本结构和HTML的注释()是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。

有人会试图使用

那如果当前的浏览器是IE，但版本比IE5还低，该怎么办呢？

可以使用

这其中就区分了IE7和IE6向下的浏览器对CSS的执行，达到兼容的目的。同时，首行默认的css.css还能与其他非IE浏览器实现兼容。

注意：默认的CSS样式应该位于HTML文档的首行，进行条件注释判断的所有内容必须位于该默认样式之后。

比如如下代码，在IE浏览器下执行显示为红色，而在非IE浏览器下显示为黑色。如果把条件注释判断放在首行，则不能实现。该例题很能说明网页对IE浏览器和非IE浏览器间的兼容性问题解决。

汪杰 2010-03-19 11:30 发表评论

IE6/IE7/Firefox浏览器不兼容原因及解决办法(zt)

汪杰 — Sat, 23 Jan 2010 11:49:00 GMT

浏览器的不兼容，大家肯定都是深恶痛绝的，往往我们只是去做修补，却忘了更重要的事情，那就是追溯根源，避免类似的不兼容再次出现。在下不才，归纳几点html编码要素，望能指点各位：
1.文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍1px 的差异。
2.ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。
3.还讨论内容撑破容器问题，横向上的。如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width。
小实验：有兴趣大家可以看看这段实验。在不同浏览器下分别测试以下各项代码。

   a.
  b.
   c.
        d.
上面的代码在不同浏览器中是不一样的，实验起源于对小height 值div 的运用，
，小height 值要配合overflow:hidden一起使用。实验好玩而已，想说明的是，浏览器对容器的边界解释是大不相同的，容器内容的影响结果各不相同。
4.浮动的清除，ff下不清除浮动是不行的。
纠正大家一个误区，遇到不兼容就说ff烂是不对的，其实更多时候是ie的奇怪表现让我们无所适从。以下列出ie6的种种劣迹。
5.最被痛恨的，double-margin bug。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。解决方案，给浮动容器定义display:inline。
6.mirrormargin bug，当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案：外层元素设定border 或设定float。
引申：ff 和ie 下对容器的margin-bottom，padding-bottom的解释有时不一致，似乎与之相关。
7.吞吃现象，限于篇幅，我就不展开了。还是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。
8.注释也能产生 bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案，ie6的这个bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“ picRotate start ”方法写注释。
9.
里加 float
，这是一个典型的，棘手的兼容问题，希望引起大家正视，给li 不同的属性会有不同的解释效果，ff下的解释稍可理解，ie6下的解释会让你摸不着头脑，由于问题的复杂性，将另起一文专门讨论该问题。在《ul使用心得》一文里有相关成果，却没给出问题解决的过程。
10.使用了“float:left;display:inline” 的ul的奇怪表现。可以看出这句css是针对ie6下的double margin bug 而加上的display:inline，这也是我的css体系里的重要一环，在《ul使用心得》一文中有相关阐述。而这句css用在ul上会让你痛苦不堪。点到为止，这里不能多说哈。
11.img下的留白，大家看这段代码有啥问题：

把div的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，要消除必须这样写

后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案：给img设定 display:block。
12.失去line-height。
文字
，很遗憾，在ie6下单行文字 line-height 效果消失了。。。，原因是这个inline-block元素和inline元素写在一起了。解决方案：让img 和文字都 float起来。
引申：大家知道img 的align 有 text-top，middle，absmiddle啊什么的，你可以尝试去调整img 和文字让他们在ie和ff下能一致，你会发现怎么调都不会让你满意。索性让img 和文字都 float起来，用margin 调整。
13.链接的hover状态。a:hover img{width:300px} 我们想让鼠标hover时，链接里包含的图片宽度变化，可惜在ie6下无效，ie7、ff下有效。
14.非链接的hover状态。div:hover{} 这样的样式ie6是不认的，在ie7、ff下才有效果。
15.block化的a链接，其内套absolute层，absolute层内放置img，ie下，鼠标点击img不会有链接效果，ff、op下正常。
想不出来了，以后想到再加吧。上面的诸多问题如果你掌握了其中奥妙，90%的不兼容问题不需要另起css hack的。
16.无法彻底清除的float。如果让ul下的li具有了float属性，如何clear浮动的li呢？
或者
class=”c”>
或者
class=”c”>
或者
class=”c”>
或者上述的组合？这个问题，我无法给出解答。下面有个例子与此相关

sfsdfsfdf

sfsdfsfdf

sfsdfsfdf
请在ie下测试，仅仅将 margin-top:19px 改为margin-top:20px 你发现什么了？要素：doctype必须有，ie6、ie7下margin-top:19px还好好的，margin-top:20px 就出问题了，无法解释。。。大家还可以将 clear 层换不同的位置测试。
解决方案：给ul 属性zoom:1 （给li 加zoom:1 没用）
引申：clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层，这样有问题，不仅仅是ff和op下失去margin效果，ie下某些margin值也会失效
dd

ff
17.ie下overflow:hidden 对其下的绝对层position:absolute或者相对层position:relative无效。解决方案：给overflow:hidden加 position:relative或者position:absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。
18.ie6下严重的bug，float元素如没定义宽度，内部如有div定义了height或zoom:1，这个div就会占满一整行，即使你给了宽度。float元素如果作为布局用或复杂的容器，都要给个宽度的。
19.ie6下的bug，绝对定位的div下包含相对定位的div，如果给内层相对定位的div高度height具体值，内层相对层将具有100%的width值，外层绝对层将被撑大。解决方案给内层相对层float属性。
20.ie6下的bug，内有的情况下，position:relative层下的float层内文字无法选中。这个bug迫使我修公用样式库。
21.终于来了个ff的缺点。width:100%这个东西在ie里用很方便，会向上逐层搜索width值，忽视浮动层的影响，ff下搜索至浮动层结束，如此，只能给中间的所有浮动层加width:100%才行，累啊。opera这点倒学乖了跟了ie。

网页来源：http://www.liushen.net/post/91.html

汪杰 2010-01-23 19:49 发表评论

display:inline-block的应用两例

汪杰 — Wed, 08 Oct 2008 07:51:00 GMT

display:inline-block的应用两例

display:inline-block的应用两例

说明|评论

一、ICON

箭头1、箭头2和
箭头3
，虽然你看到的是三个箭头，但是实际上它们是通过CSS用图片替换文字来实现的，其markup是
<i class="arrow-1 replacement">箭头1</i>
<a href="http://dancewithnet.com" class="arrow-2 replacement">箭头2</a>
<p class="arrow-3 replacement">箭头3</p>

利用{display:inline-block;}的特性可以实现行内元素具有固定的高度，这一属性已经在FireFox3 beta、IE8 beta、Opera、Safari中得到广泛的支持，IE6/7中可以利用{display:inline;zoom:1}等方法模拟,Firefox2中需要用其专有属性{display:-moz-display-box;}或{display:-moz-display-stack;} ，利用{text-indent:-9999px;overflow:hidden;}来隐藏inline-block元素中溢出的文字，但是Firefox2下需要再加上{font-size:0;}，然后利用background属性来实现图片的显示。

二、导航

后面是一个导航。

首页

上一页

1

2

3

4

5

6

下一页

末页

前面是一个导航。

汪杰 2008-10-08 15:51 发表评论

标准制作网页：用CSS的dl、dd、dt做表单

汪杰 — Wed, 09 Jan 2008 11:51:00 GMT

新建网页 3

公司名称：

*

公司工业类别：

*

公司介绍：

　　广州骏宝实业有限公司创始于1990年，是集科研、制造、销售、服务于一体，拥有研究开发中心、模具设计制造中心、电子和电路控制设计制造中心、注塑加工和产品整机生产基地的规模化经济实体。骏宝公司生产基地约占地 30000平方米，拥有精良的设备，强大的生产能力。公司按照现代化企业的规范组织和管理，坚持诚信、创新、勤奋、进取的企业精神，不断发展壮大。 <br>　　骏宝公司人才荟萃，现有职工326人，拥有研发 ... *

明：对于dl、dt、dd的设置建议不要用高度（height）和行高（line-height），在FF会产生错位，由于IE和FF是否自适应造成，建议使用dt、dd的padding属性来定位！

汪杰 2008-01-09 19:51 发表评论

HTML实体

汪杰 — Wed, 18 Oct 2006 16:24:00 GMT

有些字符，比如说“<”字符，在HTML中有特殊的含义，因此不能在文本中使用。

想要在HTML中显示一个小于号“<”，需要用到字符实体。

字符实体

在HTML中，有些字符拥有特殊含义，比如小于号“<”定义为一个HTML标签的开始。假如我们想要浏览器显示这些字符的话，必须在HTML代码中插入字符实体。

一个字符实体拥有三个部分：一个and符号（&），一个实体名或者一个实体号，最后是一个分号（;）

想要在HTML文档中显示一个小于号，我们必须这样写：<或者<

使用名字相对于使用数字的优点是容易记忆，缺点是并非所有的浏览器都支持最新的实体名，但是几乎所有的浏览器都能很好地支持实体号。

注意：实体名是大小写敏感的。

下面这个例子能够让你针对HTML实体实践一下。

<html> <body> <p>This is a character entity: A</p> <p> </body> </html>

不可拆分的空格

在HTML中，最常见的字符实体就是不可拆分空格。

通常，HTML会合并你文档中的空格。假如在你的HTML文本中连续写了10个空格，其中9个会被去掉。想要在HTML中插入空格，可以使用实体：
最常用的字符实体

显示结果描述实体名实体号
不可拆分的空格
< 小于 < <
> 大于 > >
& and符号 & &
" 引号 " "
' 单引号 '

其他一些常用的字符实体

显示结果描述实体名实体号
¢ 分 ¢ ¢
£ 英镑 £ £
¥ 人民币元 ¥ ¥
§ 章节 § §
© 版权 © ©
® 注册 ® ®
× 乘号 × ×
÷ 除号 ÷ ÷

汪杰 2006-10-19 00:24 发表评论

图片飘飘

汪杰 — Mon, 09 Oct 2006 07:50:00 GMT
javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++}setInterval('A()',5); void(0);

汪杰 2006-10-09 15:50 发表评论

[xhtml/css] float

汪杰 — Wed, 12 Jul 2006 06:03:00 GMT
"float: right" bug in IE :在IEfloat-right外围容器中文字不见了！
css :
body {
margin: 10px 50px;
}
#contener {
border: 1px solid #000;
background-color: yellow;
}
#floatRight {
float: right;
border: 1px solid red;
color: red;
width: 30%;
}
#contenu {
border: 1px solid blue;
color: blue;
}
.spacer {
clear: both;
border: 1px solid #FF00FF;
color: #FF00FF;
}
   xhtml :


#contener

#floatRight : Float block at the right of the block #contenu

#contenu : Simple block

.spacer : a "spacer" block...

   正确应该显示为:

Internet Explorer 6 显示为 :
#contener 层的文字和#contenu层不见了! 只有#contener的背景颜色!

解决办法 :
body {
margin: 10px 50px;
}
#contener {
position: relative; /* 增加的 */
border: 1px solid #000;
background-color: yellow;
}
#floatRight {
position: relative; /* 增加的*/
float: right;
border: 1px solid red;
color: red;
width: 30%;
}

Read More,Comments(0)

[xhtml/css]float:right
by banket posted at oioj on 2006-6-29 16:49:59 Weather: 晴
"float: right" bug 在IE中float-right外围容器的margin-left失效.
css :
body {
margin: 0px;
}
#contener {
border: 1px solid #000;
margin: 10px 50px;/*左右外补丁margin=50px*/
}
#floatRight {
float: right;
border: 1px solid red;
color: red;
width: 30%;
}
#contenu {
border: 1px solid blue;
color: blue;
}
.spacer {
clear: both;
border: 1px solid #FF00FF;
color: #FF00FF;
}
   xhtml :


#contener

#floatRight : Float block at the right of the block #contenu

#contenu : Simple block

.spacer : a "spacer" block...

   正确显示为:

Internet Explorer 6 显示为:

IE6.0中#contener的margin-left无效!
解决办法:
body {
margin: 10px 50px; /* 给body增加marign */
}
#contener {
border: 1px solid #000;
/* margin: 10px 50px; 取消#contener的margin,也就是给他外围增加margin替代自身margin*/
}

[xhtml/css]float:right
"float: right" bug 在IE中float-right外围容器的margin-left失效.
css :

body {
margin: 0px;
}
#contener {
border: 1px solid #000;
margin: 10px 50px;/*左右外补丁margin=50px*/
}
#floatRight {
float: right;
border: 1px solid red;
color: red;
width: 30%;
}
#contenu {
border: 1px solid blue;
color: blue;
}
.spacer {
clear: both;
border: 1px solid #FF00FF;
color: #FF00FF;
}
   xhtml :


#contener

#floatRight : Float block at the right of the block #contenu

#contenu : Simple block

.spacer : a "spacer" block...

   正确显示为:

Internet Explorer 6 显示为:

IE6.0中#contener的margin-left无效!
解决办法:

body {
margin: 10px 50px; /* 给body增加marign */
}
#contener {
border: 1px solid #000;
/* margin: 10px 50px; 取消#contener的margin,也就是给他外围增加margin替代自身margin*/
}

汪杰 2006-07-12 14:03 发表评论

[xhtml/css] IE双倍浮动边界Bug

汪杰 — Wed, 12 Jul 2006 06:02:00 GMT
The IE Doubled Float-Margin Bug
原址：http://www.positioniseverything.net/explorer/doubled-margin.html
译文：PorkFat

什么发生故障？

一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box)，并在浮动元素上使用了左边界(margin-left)来令它和容器的左边产生一段距离。看起来相当的简单，对吗？但直至它被在IE/Win中浏览为止，在浏览器中居左浮动元素的边界长度被神秘地翻了一倍！

情况应该如何？

下面的图释展示了一个简单的div(茶色的盒子)包含着一个居左浮动的div(绿色的盒子)。浮动元素有一个100px的左边界，使容器盒与它的左边缘之间产生了一个100px的间隙。到现在为止，一直都还不错。

.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*This last value applies the 100px left margin */
}

陈旧的IE“双倍占据”

原样的相同代码被在IE/Win中浏览时以些微不同的方式显示，下面的图释展示了IE/Win在布局上所做的。

这为什么会发生？别问这种傻问题！这就是IE，记得吗？符合标准只是理想的状况，不指望实现，这个简单的事实正验证了。

重点

这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间，在这之后的任意有着相似边界的浮动元素不会呈现双倍边界。只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样，双倍边界同样神秘地显示在居右的相同方式

最后，修复办法！

直到现在(04年1月)这个Bug一直被认为是无法修复的，通常用来替代错误的边界的控制方法如：一个不可视浮动元素的左边距，连同一个内嵌的盒子一起，可视的盒子装在不可视浮动元素里；或者使用技巧仅对IE/Win设定边界的1/2值。这办法生效了，但是是混乱的而且搞糟了干净的源代码。不过现在全部结束了。

Steve Clason发现了一个修复办法，描述在他的Guest Demo里，修复了双倍边界和围绕文字缩进Bug。这是一个经典的IE的Bug修复办法，使用一个属性来修复影响不相关属性的Bug。

现在如何来做？

研究它，简单地将{display: inline;}设置给浮动元素就是全部所需做的！是的，听起来太简单了，不是吗？不过这是真的，仅仅一个display的”inline”声明已经能够胜任了。

熟悉规则的人知道浮动元素自动设置为”block”元素，而不管他们之前是什么。就如Steve从W3C里指出：

9.5.1 Positioning the float: the ‘float’ property

“This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings:

left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the ‘clear’ property). The ‘display’ is ignored, unless it has the value ‘none’.

right
Same as ‘left’, but content flows on the left side of the box, starting at the top.

none
The box is not floated. ”

这说明浮动元素上的{display: inline;}会被忽略，事实上所有的浏览器没有呈现任何改变，包括IE。但是，它不知何故让IE停止将浮动元素的边界翻倍。因而，这个修复办法可以被直接应用，而没有任何繁琐的隐藏方法。如果将来的一款浏览器决定对这个修复办法抱恙，只要把这个修复装入IE独用的Tan Hack里，细节如同IE Three Pixel Text-Jog Demo。

下面是两个使用了前面相同代码的生动演示，第一个照常显示了IE的Bug，下一个对浮动元素使用了”inline”修复。

.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}

篇外话

你可能注意到这个Bug修复的想法在Steve的演示页底部复制，你看到，在一开始Steve注意到IE的文本缩进Bug并找到了”inline”来修复它。他引起了我(Big John)的注意，因为这是一个冷门的Bug和修复方法，我于是请Steve为PIE详细描述了”Guest Demo”。在准备演示的期间，Steve发现这个办法同样修复了双倍边界Bug，一个更为普遍的难题。Steve是个忙人，他让我写这篇”有深度的”演示页利用这个方法将Bug本身解释得更全面。

汪杰 2006-07-12 14:02 发表评论

[xhtml/css] CSS中的行为——expression

汪杰 — Wed, 12 Jul 2006 06:01:00 GMT
CSS中的行为——expression
虽然是不符合标准的也只有ie才能识别，但是他确实给css的功能扩展了不少。下面是摘自互联网上的文字和例子，因为都被转烂了，没法注明出处。
IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果。在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。
给元素固有属性赋值
下面是定义container容器的宽度，如果<725就为自己的宽度，否则就等于725，相当于max-width:725px;。

给元素自定义属性赋值
例如，消除页面上的链接虚线框。通常的做法是：
link1
link2
link3
粗看或许还体现不出采用expression的优势，但如果你的页面上有几十甚至上百个链接，这时的你难道还会机械式地Ctrl+C，Ctrl+V么，何况两者一比较，哪个产生的冗余代码更多呢？
采用expression的做法如下：

link1
link2
link3
说明：里面的star就是自己任意定义的属性，你可以随自己喜好另外定义，接着包含在expression()里的语句就是JS脚本，在自定义属性与expression之间可别忘了还有一个引号，因为实质还是CSS，所以放在style标签内，而非script内。OK，这样就很容易地用一句话实现了页面中的链接虚线框的消除。不过你先别得意，如果触发的特效是CSS的属性变化，那么出来的结果会跟你的本意有差别。例如你想随鼠标的移进移出而改变页面中的文本框颜色更改，你可能想当然的会认为应该写为

可结果却是出现脚本出错，正确的写法应该把CSS样式的定义写进函数内，如下所示：

注意
不是非常需要，一般不建议使用expression，因为expression对浏览器资源要求比较高。

汪杰 2006-07-12 14:01 发表评论

utf-8在responseBody中得编码方式

汪杰 — Sat, 15 Apr 2006 07:10:00 GMT

utf-8在responseBody中得编码方式

239|187| 191|233| xxx|xxx| 233|xxx|xxx|233| xxx|xxx| ...

应用示例代码：

添加评论 | 阅读评论 (2)

13:45:41 | 固定链接 | 引用通告 (0) | 记录它 | 脚本技术

固定链接关闭

http://spaces.msn.com/shouhaimu/blog/cns!B6DC10B28719D893!107.entry

xmlHttp.responseBody的重编码函数

function reCode(b){
//***Author: Hutia
//last modified by shouhaimu(QQ:30836570)
//速度已提高近50倍
var glbEncode=new Array();
var t=rsB(b);
t=escape(t).replace(/%u/g,"").replace(/(.{2})(.{2})/g,"%$2%$1").replace(/%([A-Z].)%(.{2})/g,"@$1$2");
t=t.split("@");
var i=0,j=t.length,k;
while(++i{
k=t[i].substring(0,4);
if(!glbEncode[k])glbEncode[k]=escape(rsChar(eval("0x"+k))).substring(1,6);
t[i]=glbEncode[k]+t[i].substring(4);
}
return unescape(t.join("%"));
}

调用得VBS函数

Function rsB(vIn)
rsB = MidB(vIn,1)
End Function

Function rsChar(vIn)
rsChar = Chr(vIn)
End Function

汪杰 2006-04-15 15:10 发表评论

处理IE中Bubble Up 事件模型的细节

汪杰 — Mon, 10 Apr 2006 12:49:00 GMT
我们都知道，IE实现的是一种叫做bubble up的事件模型。在这个模型中我们的事件可以通过Web页元素的hierarchy，从事件触发元素向其parentElement传递，除非被显示的cancel。不过在一些复杂的事件响应处理中，还有很多细节需要仔细考虑。

    对于Web元素可侦听的事件来说，大多数的事件都是比较简单的。比如什么onload、onclick、onkeypress、onmousedown、onmouseup等等。但是却有一些是比较麻烦的，比如onmousemove、onmouseover和onmouseout。为什么说这几个比较麻烦呢？因为这几个事件一般会比较频繁的被触发，而且onmouseover和onmouseout还更加特殊，这两个事件还会影响event的toElement和fromElement属性。

    同时onmouseover和onmouseout以及onmousemove还是不确定的事件，什么意思呢？就是说当鼠标从html元素上移动时，不是100%能触发这几个事件。这是因为，浏览器中dhtml的事件触发是在浏览器事件处理进程合理idle的时候，根据用户的和浏览器的交互遍历dhtml树的状态来产生的。当浏览器事件处理进程太忙，或者用户交互过于密集的时候，由于IE没有事件队列，没有被处理的事件就再也不会出发了。这里的事件丢失是完全可以接受的，如果不作丢弃浏览器的交互反而会非常的难用。就常常会出现这种情况，有时当我们的windows太繁忙而不立即响应鼠标事件时，我们却到处点击鼠标想"激活"系统，系统在忙完那个费时的处理后，会来接着处理message queue里的一大堆message，我们就能看到刚才点过的鼠标操作都被windows连续处理了。

    回头继续说我们事件处理中的细节问题。看下面这个示例：

     this is a inner span element.

    我们在最外面的蓝色span元素中监听事件onmouseover，代码为：
onmouseover="status=event.srcElement.style.borderColor + ', timestamp: ' + new Date()"
    当我们把鼠标移入蓝色region，我们看到status上显示"blue"。我们继续在蓝色region中移动鼠标时(不要和别的边相交)，我们发现onmouseover在blue时的timestamp不变，说明如果鼠标已进入一个element的区域中，就不再触发onmouseover了(否则就成了onmousemove了)。可是这个时候如果我把鼠标移入绿色或红色的region中，我们发现又有新的onmouseover事件被触发并被蓝色span元素截获。而且不断的在绿色、红色及蓝色regions中移动鼠标，timestamp也在不断地变，说明总有onmouseover事件被触发。

    其实既然都说了IE的事件处理方式是bubble up，那么蓝色span截获绿色和红色regions中的onmouseover似乎是对的。可是对于蓝色span来说，这些被多余触发的onmouseover事件其实是不被期望的。IE没有做这个过滤，不知道是出于什么目的，不过我们可以自己在脚本中过滤掉这样的useless事件，有时这些事件很可能会干扰我们做精确的对蓝色span进行事件控制。假设蓝色span的onmouseover事件handler为isAbsoluteMoveOver，代码如下：
1function isAbsoluteMoveOver(elmt)
2{
3    if ( event )
4    {
5        var tagName = elmt.tagName;
6        var to = FindParentElement(event.toElement, tagName);
7        var from = FindParentElement(event.fromElement, tagName);
8        if ( elmt === to && from === to )
9        {
10            return false;
11        }
12    }
13    return true;
14}
    这时只有在鼠标移入或移出蓝色span时，isAbsoluteMoveOver才返回true!

    注：FindParentElement参看《设计有复杂客户端Script的服务器控件》。

汪杰 2006-04-10 20:49 发表评论

这么小心还是在"08"向8的转换上栽了

汪杰 — Mon, 10 Apr 2006 12:48:00 GMT

    关于javascript中的parseInt方法，本来没有什么好说的，它的功能就是把一个字符串从左向右的可识别的数字部分转换成数值，并且它还有个可选的参数radix。这不，问题就出在这个参数上了。

    关于parseInt的解释msdn说得很清楚，抄过来就行了：
    parseInt(numString, [radix])
    Arguments
    numString
         Required. A string to convert into a number.
    radix
         Optional. A value between 2 and 36 indicating the base of the number contained in numString. If not supplied, strings with a prefix of '0x' are considered hexadecimal and strings with a prefix of '0' are considered octal. All other strings are considered decimal.

    对于radix的注意事项，我记得园子里也有人提醒过。google一下，还不止一篇提到：
    javascript中parseInt的问题
    Javascript 日期校验完备全过程

    那还说什么呢？说下这个问题怎么被遇到了，以及以后怎么避免吧，不要栽在同一个坑里才是上策嘛。

    我写了一段处理日期的脚本，功能是把一段literal形式的日期转为日期对象。比如：2005-5-14 18:16:6，要转成一个Date对象。方法ConvertToDate()如下：
function ConvertToDate(strDate)
{
   strDate = strDate.replace(/-/ig, ':').replace(' ', ':');
     var dataParts = strDate.split(':');
    return new Date(parseInt(dataParts[0]), parseInt(dataParts[1])-1, parseInt(dataParts[2]),
         parseInt(dataParts[3]), parseInt(dataParts[4]), parseInt(dataParts[5]));
}

    这个方法运行正常，而且稍微看看，由于日期是紧凑形式，似乎是不会出现05，08这样的东西需要转换。对，如果一直这样也就对了，我也不会载在这个转换上面了。问题是后来服务器端的代码被移到了一个英文版.net framework的服务器上去了，这个时候DateTime结构的ToString()默认返回回来的日期字符串成了"5/14/2005 6:16:6 PM"了，我前面的那个ConvertToDate()不能转换了。为了偷点懒，把DateTime.ToString()的结果格式化一下不就行了吗，于是把.ToString()改成了.ToString("u").Replace("Z", "")。这下的输出结果成了："2005-05-14 18:16:06"，使用ConvetToDate()来转换似乎仍然工作的挺好的。
    后来的事情嘛，就是我遇到了默认八进制格式的问题，就是"0"开头的数字的问题。因为使用日期的等宽输出形式后，0d这种形式就非常常见了。由于当初的ConvertToDate()没有考虑这个问题(当初确实也不会遇到0d这种形式，小于10的数字就是d这种格式)，结果埋下了此祸根。

    修改这个bug也很简单，给parseInt方法加上第二个参数就行了，修改后的ConvertToDate()为：
function ConvertToDate(strDate)
{
   strDate = strDate.replace(/-/ig, ':').replace(' ', ':');
     var dataParts = strDate.split(':');
    return new Date(parseInt(dataParts[0], 10), parseInt(dataParts[1], 10)-1,
         parseInt(dataParts[2], 10), parseInt(dataParts[3], 10),
         parseInt(dataParts[4], 10), parseInt(dataParts[5], 10));
}

    这里得到了一个小小的教训，在使用带有optional参数的方法时，应该格外的小心，由于parseInt在没有radix参数时，但却支持"0x"和"0"这种前缀作为一个radix的隐式说明。所以以后在使用具有默认参数的方法时，应尽量明确给出参数值，以减少后期代码修改而带来不可预见bug。

posted on 2005-05-14 17:55 birdshome 阅读(1391) 评论(1) 编辑收藏收藏至365Key 所属分类: Jscript&Dhtml开发、Debug中的滑铁卢

评论

 # re: 这么小心还是在"08"向8的转换上栽了   回复
最佳实践：每次都加上第二个参数

汪杰 2006-04-10 20:48 发表评论

unbeforeunload

汪杰 — Mon, 10 Apr 2006 06:47:00 GMT
这个unbeforeunload的具体用法我就不说了，反正几乎能引起当前页面发生跳转的任何动作，都会触发这个事件。并且它先于unload事件被触发，如果在其的事件处理函数里面向event.returnValue属性赋值非空字符串，就会出现一个如上图的窗口（代码如下）。
window.onbeforeunload = function ()
{
    // . . .
    event.returnValue = "You will lose any unsaved content";
    // . . .
}

汪杰 2006-04-10 14:47 发表评论

应用WEB标准会使ScrollTop属性失效

汪杰 — Mon, 03 Apr 2006 08:02:00 GMT

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" >

加上这段后，document.body.scrollTop永远等于0

我在做document.all.tooltip.style.pixelLeft=event.clientX+document.body.scrollTop;

显示层的位置的时候发现拉到网页下面,层还在上面,原来此时

alert(document.body.scrollTop);显示为0

汪杰 2006-04-03 16:02 发表评论

制作虚线表格的简单样式

汪杰 — Mon, 03 Apr 2006 07:58:00 GMT



test

汪杰 2006-04-03 15:58 发表评论

IE功能汇总

汪杰 — Mon, 03 Apr 2006 07:56:00 GMT
      classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2>

http://localhost");' type=button value=导入收藏夹>
http://localhost");' type=button value=导出收藏夹>

汪杰 2006-04-03 15:56 发表评论

表格斜线

汪杰 — Mon, 03 Apr 2006 07:54:00 GMT

New Document





















张三李四王五
数学 55 66 77
英语 99 68 71
语文 33 44 55

汪杰 2006-04-03 15:54 发表评论

输入日期自动移动到下一位

汪杰 — Mon, 03 Apr 2006 07:43:00 GMT

    name        = "txt"
    maxlength   = "16"
    size        = "18"
    value       = "0000-00-00 00:00"
    onfocus     = "objFocus()"
    onkeydown   = "return keyDown(this)"
    onkeypress = "return keyPress(this)"
    onpaste     = "return false"
    ondragenter = "return false"
    style       = "ime-mode:Disabled"
>

汪杰 2006-04-03 15:43 发表评论

实现textarea内字符串自动选择查询替换功能

汪杰 — Mon, 03 Apr 2006 07:43:00 GMT

New Document

<br />this is the original text, and this is the string will be repalced.<br />this is the original text, and this is the string will be repalced.<br />this is the original text, and this is the string will be repalced.<br />this is the original text, and this is the string will be repalced.<br />this is the original text, and this is the string will be repalced.<br />this is the original text, and this is the string will be repalced.<br />

will be

has been

汪杰 2006-04-03 15:43 发表评论

TextArea实现光标定位及内容查找例子

汪杰 — Mon, 03 Apr 2006 07:42:00 GMT

光标位置

点击 TextArea 实现光标定位

我怕来不及我要抱着你，直到感觉你的绉纹有了岁月的痕迹，直到视线变得模糊直到不能呼吸<br />为了你我愿意<br />动也不能动也要看着你，直到感觉你的发线有了白雪的痕迹，直到肯定你是真的直到失去力气让我们形影不离<br />如果全世界我也可以放弃，至少还有你值得我去珍惜而你在这里就是生命的奇迹<br />也许全世界我也可以忘记，就是不愿意失去你的消息你掌心的痣我总记得在哪里<br />我们好不容易我们身不由已，我怕时间太快不够将你看仔细，我怕时间太慢日夜担心失去你恨不得一夜之间白头永不分离<br />

光标位置：

选择指定范围： --

选择查找字符：

boundingHeight:
boundingWidth:
boundingTop:
boundingLeft:
offsetLeft:
offsetTop:
text:

汪杰 2006-04-03 15:42 发表评论

改变iframe的滚动条的颜色、与滚动条的背景颜色

汪杰 — Mon, 03 Apr 2006 07:31:00 GMT

DHTMLET® 属性清单 ¦ 相关内容： SEE ALSO ------------------------------------------ NONE

CSS Scrollbar Properties 滚动条属性

Scrollbar Properties
属性 CSS Version
版本 Compatibility
兼容性 Inherit From Parent
继承性 Description
简介
scrollbar-3d-light-color IE专有属性 IE5.5+ 有设置或检索滚动条亮边框颜色
scrollbar-highlight-color IE专有属性 IE5.5+ 有设置或检索滚动条3D界面的亮边（ThreedHighlight）颜色
scrollbar-face-color IE专有属性 IE5.5+ 有设置或检索滚动条3D表面（ThreedFace）的颜色
scrollbar-arrow-color IE专有属性 IE5.5+ 有设置或检索滚动条方向箭头的颜色
scrollbar-shadow-color IE专有属性 IE5.5+ 有设置或检索滚动条3D界面的暗边（ThreedShadow）颜色
scrollbar-dark-shadow-color IE专有属性 IE5.5+ 有设置或检索滚动条暗边框（ThreedDarkShadow）颜色
scrollbar-base-color IE专有属性 IE5.5+ 有设置或检索滚动条基准颜色。其它界面颜色将据此自动调整

说明：这种颜色是CSS2标准属性。这种颜色是IE建议样式表属性。这种颜色是NS私有属性。这种颜色是目前尚无浏览器支持的属性。
---------------------------------------------------------------

---------------------------------------------------------------

样式要写在被iframe装入的页面中，或用js修改body标记的属性

汪杰 2006-04-03 15:31 发表评论

css控制div居中

汪杰 — Mon, 03 Apr 2006 07:26:00 GMT

永远居中

汪杰 2006-04-03 15:26 发表评论

清除浮动--使用:after

汪杰 — Thu, 23 Mar 2006 07:57:00 GMT
特点：不需要另外加个清除DIV.
:after（伪对象）--设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。
CSS
#wrapfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

设display:block;应用到:after 元素，因为display的默认值是"inline", 不能收到clear的特性，同时将清除容器的高度设为零，height: 0；，可见度为隐藏.
这是没有清除过浮动的．非Ie 浏览器看不到wrap的背景和边框
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

http://www.w3.org/1999/xhtml">

清除浮动--使用:after--Clearing




清除浮动--使用:after

    这是没有清除过浮动的．非Ie
浏览器看不到wrap的背景和边框．

特点：不需要另外加个清除DIV.


:after（伪对象）--设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie
浏览器支持，所以并不影响到IE/WIN浏览器。


CSS



#wrap:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

设display:block;应用到:after 元素，因为display的默认值是"inline",
不能收到clear的特性，同时将清除容器的高度设为零，height: 0；，可见度为隐藏


left





这是清除过浮动的．非Ie 浏览器看到wrap的背景和边框．
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

http://www.w3.org/1999/xhtml">

清除浮动--使用:after--Clearing




清除浮动--使用:after


特点：不需要另外加个清除DIV.


这是清除过浮动的．非Ie

          浏览器看到wrap的背景和边框．


:after（伪对象）--设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie
浏览器支持，所以并不影响到IE/WIN浏览器。


CSS



#wrap:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

设display:block;应用到:after 元素，因为display的默认值是"inline",
不能收到clear的特性，同时将清除容器的高度设为零，height: 0；，可见度为隐藏


left





请问forestgan大哥，
display的默认值苏小雨的手册里这样写的：
block : CSS1 块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行
inline : CSS1 内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行
我怎么区分什么情况下是块对象，什么情况下是内联对象呢？
div p h1 ......肯定是块元素.
内联对象:span

也是吧?
嗯，我上次忘记是在哪里回的贴了。
想知道什么是块级元素，最简单的方式就是随便下载一个dtd，去查看里面的代码，那里面的定义算满清晰的了。而且权威

汪杰 2006-03-23 15:57 发表评论

滑动门menu欣赏

汪杰 — Thu, 23 Mar 2006 07:55:00 GMT

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

Untitled Document

Tab Menu


Link 1


Link 2


Link 3


Longer Link Text


Link 5


Link 6

Link 7

Tab Menu B


Link 1


Link 2


Link 3


Longer Link Text


Link 5


Link 6

Link 7

Tab Menu C


Link 1


Link 2


Link 3


Longer Link Text


Link 5


Link 6

Link 7

Tab Menu D


Link 1


Link 2


Link 3


Longer Link Text


Link 5


Link 6

Link 7

Tab Menu E


Link 1


Link 2


Link 3


Longer Link Text


Link 5


Link 6

Link 7

Tab Menu F


Link 1


Link 2


Link 3


Longer Link Text


Link 5


Link 6

Link 7

Tab Menu G


Link 1


Link 2


Link 3


Longer Link Text


Link 5


Link 6

Link 7

Tab Menu H


Link 1


Link 2


Link 3


Longer Link Text


Link 5


Link 6

Link 7

Tab Menu I


Link 1


Link 2


Link 3


Longer Link Text


Link 5


Link 6

Link 7

Tab Menu J


Link 1


Link 2


Link 3


Longer Link Text


Link 5


Link 6

Link 7

Tab Menu K


Link 1


Link 2


Link 3


Longer Link Text


Link 5


Link 6

Link 7

忘了来源了,只记得是个外国网站

汪杰 2006-03-23 15:55 发表评论

绕过IE6支持IE5的别一种CSS写法-IE也"支持">

汪杰 — Thu, 23 Mar 2006 07:52:00 GMT
在我印象中一直有这样认为,IE不支持>,那时在写一个效果,要绕过IE5 而不能在IE5所能定义到的a:hover定义样式~不然IE5老是乱跑,本以为用>简单解决掉IE~没想到IE5也"认识",意外的收获
因大家都不用IE5了所以用发图片
www.rotui.net/lab/browser/ie5.gif
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
http://www.w3.org/1999/xhtml">

绕过IE6支持IE5的别一种写法-IE也"支持"> - Beautiful Style « 样式之美 »

http://www.rotui.net" title="Home" />

绕过IE6支持IE5的别一种写法-IE也"支持">"

作者:http://aoao.rotui.net/" title="RotUI.NET">嗷嗷
http://www.rotui.net" title="Beautiful Style">首页
http://www.rotui.net/lab/browser/ie5.gif">保存成图片的样子

公共定义

#show,#show1,#show2,#show3,#show4,#show5,#show6,#show7,#show8{
width:400px;
margin:20px;
padding:20px;
}
.show1,.show2,.show3,.show4,.show5,.show6{
width:400px;
margin:20px;
padding:20px;
}
ID测试1


*>html #demo1#test1 #show1

   {

   background-color : #999;

   color:#fff;

   }

id测试2


* html>#demo2 #test2 #show2

   {

   background-color : #999;

   color:#fff;

   }

id测试3


* html #demo3>#test3 #show3

   {

   background-color : #999;

   color:#fff;

   }

id测试4


* html #demo4 #test4>#show4

   {

   background-color : #999;

   color:#fff;

   }

id测试5


* html #demo5>#show5

   {

   background-color : #999;

   color:#fff;

   }

id测试6


* html #demo6 #show6

   {

   background-color : #999;

   color:#fff;

   }

id测试7


* html #demo7#show7

   {

   background-color : #999;

   color:#fff;

   }

小结:从5~6~7时~ ID测试567是一样的~应该是IE5把忽略 >

class测试1


*>html .demo1.test1 .show1

   {

   background-color : #999;

   color:#fff;

   }

class测试2


* html>.demo2 .test2 .show2

   {

   background-color : #999;

   color:#fff;

   }

class测试3


* html .demo3>.test3 .show3

   {

   background-color : #999;

   color:#fff;

   }

class测试4


* html .demo4 .test4>.show4

   {

   background-color : #999;

   color:#fff;

   }

class测试5


* html> .demo5 .test5 .show5

   {

   background-color : #999;

   color:#fff;

   }

class测试6


* html.demo6 .test6 .show6

   {

   background-color : #999;

   color:#fff;

   }

class测试7


.test7.show7

{

margin:20px;border:1px solid #f00;

}



class测试8


.test8 .show8

{

margin:20px;border:1px solid #f00;

}

原来大家的写法



@media tty {

   i{content:"\";/*" "*/}};#show

   {

   background-color : #999;

   color:#fff;

   }

   {;}/*";}

   }/* */

总结 IE5会把忽略">" ,而且跟在html后面如果是ID,连着写IE5也是认识的(见class测试6,id测试8), 虽然IE5不能支持">",可是IE6不认识">" 我们就可以利用IE5 和IE6 对">"的不同解析,用他来绕过IE6.

测试环境:windows2000+IE5, window2000 +IE6, window98升级2K+IE5

总结 IE5会把忽略>, 虽然IE5不能支持>,可是IE6不认识>; 我们就可以利用IE5 和IE6 对>;的不同解析,用他来绕过IE6

汪杰 2006-03-23 15:52 发表评论

[翻译]Equal Height Columns --DIV+CSS布局中自适应高度的解决方法

汪杰 — Thu, 23 Mar 2006 07:50:00 GMT
作者:Alex Robinson
这是一个比较典型的三行二列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，按一般的做法，大多采用背景图填充、加JS脚本的方法使列的高度相同，本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。
先看代码：
#wrap{ overflow: hidden; } #sideleft, #sideright{ padding-bottom: 32767px; margin-bottom: -32767px; }
实现原理：
块元素必须包含在一个容器里。
应用overflow: hidden 到容器里的元素。
应用 padding-bottom（足够大的值）到列的块元素。
应用margin-bottom（足够大的值）到列的块元素。
padding-bottom将列拉长变的一样高，而负的margin-bottom又使其回到底部开始的位置，同时，溢出部分隐藏掉了。
兼容各浏览器
IE Mac 5
得到高度正确，所以要过滤掉上面的代码。
/*\*/ #sideleft, #sideright{ padding-bottom: 32767px; margin-bottom: -32767px; } /**/

Opera
1. Opera7.0-7.2不能正确清除溢出部分，所以要加：
/* easy clearing */ #wrap:after { content: '[DO NOT LEAVE IT IS NOT REAL]'; display: block; height: 0; clear: both; visibility: hidden; } #wrap { display: inline-block; } /*\*/ #wrap { display: block; } /* end easy clearing */ /*\*/
2. Opera8处理overflow: hidden有个BUG,还得加上以下代码：
/*\*/ #sideleft, #sideright { padding-bottom: 32767px !important; margin-bottom: -32767px !important; } @media all and (min-width: 0px) { #sideleft, #sideright { padding-bottom: 0 !important; margin-bottom: 0 !important; } #sideleft:before, #sideright:before { content: '[DO NOT LEAVE IT IS NOT REAL]'; display: block; background: inherit; padding-top: 32767px !important; margin-bottom: -32767px !important; height: 0; } } /**/

Opera9的B2在修正8的bug.
测试环境：IE5.01、IE5.5、IE6.0、Firefox1.5、Opera8.5、Netscape 7.2通过。
最终效果:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
http://www.w3.org/1999/xhtml">

Equal height(DIV+CSS布局中自适应高度的解决方法)


Head

sideleft


要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。


像素是计算机屏幕上的不可缩放的点，而一个
      h3 就是一个字大小的方块。由于字体大小的变化， h3
      代表用户喜欢的文字大小的相对单位。


采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。


也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。


要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。


像素是计算机屏幕上的不可缩放的点，而一个
      h3 就是一个字大小的方块。由于字体大小的变化， h3
      代表用户喜欢的文字大小的相对单位。


采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。


也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。



sideright


要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。


像素是计算机屏幕上的不可缩放的点，而一个
      h3 就是一个字大小的方块。由于字体大小的变化， h3
      代表用户喜欢的文字大小的相对单位。


采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。


也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。



    Footer


制作：forestganhttp://www.forest53.com">forestgan>

原文：http://www.positioniseverything.net/articles/onetruelayout/equalheight
IE和FF都没问题，但是Opera下处理overflow: hidden BUG的代码有缺陷啊，当页面长度到2000就出问题了，另外布局复杂点的话也会出现几象素差
请问有其他的解决方案没?
谢谢momomolo!
试了下确实存在,暂时还没有这个问题的解决方法.
你可采用背景图的方法,这是最原始简单实用的方法.

汪杰 2006-03-23 15:50 发表评论

点击 TextArea 实现光标定位我怕来不及我要抱着你，直到感觉你的绉纹有了岁月的痕迹，直到视线变得模糊直到不能呼吸<br />为了你我愿意<br />动也不能动也要看着你，直到感觉你的发线有了白雪的痕迹，直到肯定你是真的直到失去力气让我们形影不离<br />如果全世界我也可以放弃，至少还有你值得我去珍惜而你在这里就是生命的奇迹<br />也许全世界我也可以忘记，就是不愿意失去你的消息你掌心的痣我总记得在哪里<br />我们好不容易我们身不由已，我怕时间太快不够将你看仔细，我怕时间太慢日夜担心失去你恨不得一夜之间白头永不分离<br /> 光标位置：选择指定范围： -- 选择查找字符：	boundingHeight:
	boundingWidth:
	boundingTop:
	boundingLeft:
	offsetLeft:
	offsetTop:
	text:

IT博客-asfman-文章分类-div css dhtml

format block context

转：修复IE6下LI元素的几点BUG

CSS: 修复IE6下LI元素的几点BUG

转XHTML CSS 常见问题和解决方案

XHTML CSS 常见问题和解决方案

fk ie6

IF条件注释有哪些？

IF条件注释有哪些？

解释

注意：

那如果当前的浏览器是IE，但版本比IE5还低，该怎么办呢？

IE6/IE7/Firefox浏览器不兼容原因及解决办法(zt)

display:inline-block的应用两例

display:inline-block的应用两例

说明|评论

一、ICON

二、导航

标准制作网页：用CSS的dl、dd、dt做表单

HTML实体

图片飘飘

[xhtml/css] float

[xhtml/css] IE双倍浮动边界Bug

现在如何来做？

[xhtml/css] CSS中的行为——expression

utf-8在responseBody中得编码方式

处理IE中Bubble Up 事件模型的细节

这么小心还是在"08"向8的转换上栽了

评论

# re: 这么小心还是在"08"向8的转换上栽了 回复

unbeforeunload

应用WEB标准会使ScrollTop属性失效

制作虚线表格的简单样式

IE功能汇总

表格斜线

输入日期自动移动到下一位

实现textarea内字符串自动选择查询替换功能

TextArea实现光标定位及内容查找例子

改变iframe的滚动条的颜色、与滚动条的背景颜色

css控制div居中

清除浮动--使用:after

滑动门menu欣赏

Tab Menu

Tab Menu B

Tab Menu C

Tab Menu D

Tab Menu E

Tab Menu F

Tab Menu G

Tab Menu H

Tab Menu I

Tab Menu J

Tab Menu K

绕过IE6支持IE5的别一种CSS写法-IE也"支持">

绕过IE6支持IE5的别一种写法-IE也"支持">"

ID测试1

id测试2

id测试3

id测试4

id测试5

id测试6

id测试7

class测试1

class测试2

class测试3

class测试4

class测试5

class测试6

class测试7

class测试8

原来大家的写法

[翻译]Equal Height Columns --DIV+CSS布局中自适应高度的解决方法

Head

sideleft

sideright

# re: 这么小心还是在"08"向8的转换上栽了回复