阿城

1，当table中td为空时，IE6中将不显示border；即<td style=border:1px solid #000></td> 这个border是没有效果的；
解决方法：

<style>
table {border-collapse:collapse;}
td {empty-cells:show;}
</style>

2，左右栏的一栏固定宽度，另一栏自适应100%：

html:

<div id=m>
<div id=l></div><div id=r></div><div class=c></div>
</div>

css:

#m {width:100%;}
#l {with:190px; float:left;}
#r {margin-left:190px;}
.c {clear:both;}

3,左右栏高度一致，代码如：\

<div id=m>
<div id=l></div><div id=r></div><div></div>
</div>

方法一：为<div id=m>添加背景图片；
方法二：js解决，代码如下：

<script type=”text/javascript”>
window.onload=window.onresize=function(){
if(document.getElementById(“r”).clientHeight<document.getElementById(“l”).clientHeight){
document.getElementById(“r”).style.height=document.getElementById(“l”).offsetHeight+”px”;
}
else{
document.getElementById(“l”).style.height=document.getElementById(“r”).offsetHeight+”px”;
}
}
</script>

界面与前端 css, html

已经不记得2advanced.com的前四个版本了，上一次看见好象是深红色的金属感。

从一个叫blue的朋友的blog里看见了这个新版本的消息，直接点了。 感觉非常的不错，深色的酷酷的感觉，背景的图片也画的非常好。

http://www.2advanced.com

界面与前端

页面：body.html

1. 以前在千鸟的站上看到过”html,body的height属性”，说的是在使body的height设置100%之前， 要先把html的height设置为100%;
   html,body { height:100%; }
2. 测试了一下，html这个标签没有块、内联一说，没有定位一说，position的absolute、relative没有任何作用。html的样式有几个比较好用，主要设置页面body的可视面积以外的外观，比如 background、overflow,height、border； ——关于border，千鸟有一篇文章写到“在IE中，html有一个border-top的值。”
3. body的默认position属性为static，也可以对body进行个性化的设置，比如本文的body.html中深黑色区域即是body的范围；——背景的红色则是html的background属性；
   这个例子中body的样式是这样写的：
   body {
   width:778px; height:100%;
   max-width:1000px; /*最大的宽度*/
   min-width:700px; /*最小宽度*/
   background:#333333;
   font-size:12px;
   line-height:20px;
   overflow-y:scroll; /*纵轴方向的滚动条为显示*/
   overflow-x:hidden; /*横轴的滚动条始终隐藏*/
   margin:0;
   position:relative; /*定位*/
   right:100px; /**/
   top:10px; /**/
   }
4. 如3中的说明，body的position设置为relative后，body中的内容（div）就能用position:absolute设定。
5. 暂时这么多

界面与前端

FF与IE对UL、OL有不同的缩进解释的方法 , 解决方法如下:
[code]
ul,ol {
padding-left:-20px;[color=Red]!important;
padding-left:20px;
}
[/code]
这样理解：
!important的应用：
padding-left:-20px;[color=Red]!important;用于FF，因为FF认识!important, 它的意思是“提升指定样式规则的应用优先权”——最重要的是，IE浏览器不认识它；
padding-left:20px; IE认识这个，所以在IE中会应用这个值。

为什么是20px？
这篇文章（“HTML4标签的默认样式列表”）中：[code]
ol, p, ul, center,
dir, hr, menu, pre { display: block }/*ul,ol是块对象*/

li 　{ display: list-item }/*list-item CSS2)将块对象指定为列表项目。并可以添加可选项目标志 */

blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }  /*默认情况下，这几个属性的margin-top和margin-bottom是1.12em*/

ol, ul, dir,
menu, dd { margin-left: 40px } /*默认情况下，这几个属性的margin-left值为40px;就是说，40px有时候在实际页面中会显的太宽，需要调整到20px， 因此就有了上面应用!important解决这个宽度的例子——为什么要用!important? 因为FF忽略了margin-left:40px;的值*/

ol { list-style-type: decimal }/*很明显，说的是，ol是有序列表，decimal就是阿拉伯数字，1、2、3、4、5、……*/

ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0 }/*应该是列表镶套吧，当一个列表在另一个列表中出现的时候，margin的 top和bottom值为0。*/
[/code]
上面这段代码列出了html语言中默认的与ul、ol、li有关系的几种值——尽管和题目关系不大。 明白了这些，下次CSS就可以这样写：[code]
ul,ol {
margin-top:0;
margin-bottom:0;
margin-left:-20px;!important; /*这里的 " ; "可不能不写， 否则!important 无效*/
margin-left:20px;
}
[/code]

还可以用这种方法解决FF不处理HTML默认的 ul、ol的margin-left:40px 的问题：
利用list-style-image或 background-image属性：
http://css.maxdesign.com.au/listamatic/vertical05.htm

┊P.S. 对于!important 的详细讨论

myai 理解的比较透彻: （有一次在蓝色理想看见的一个帖子，争论“IE认不认识!important”的这个问题，抄来一段）

这是利用解析的顺序的方法来解决问题！你试试在一个定义里写两个background:颜色;看看效果是如何？当你两个写在一起时你无法解决FF和IE两个要读取不同属性的要求啊。所以要加个!important来达到优先目的！IE不支持优先条件值!important自然就去读下一个值了。但你单独写时，IE先读取了背景属性值，然后再读取!important，它的确不认识它，但是你后面没有给出第二个值时，但是之前的值已经读取了。所以背景颜色一样会显示。关键是利用IE不认识!important优先条件属性和CSS读取属性值的规则，最后一个属性值为准。
写了这么多你还不懂的话那我真的无语。你继续坚持你的固执吧。再一次斩钉截铁的告诉你IE不认识!important

以下引用两篇文章里的两段话。

!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权(参见：W3.org的解释)。语法格式{ sRule!important }，即写在定义的最后面.

”有一些CSS技巧可以修正在非IE浏览器的显示效果，例如给不同浏览器不同的属性值。

我同一元素定义中使用了!important 值，相同的定义写在前面可以优先执行，这个值不被IE浏览器支持。

background: url(menuBullet2.gif) no-repeat 4px 6px !important;
background: url(menuBullet2.gif) no-repeat 4px 9px;
在CSS中，如果同一元素有多个定义，最后一个是有效的。但是因为IE不支持!important，所以IE将使用第二个定义值，而其他浏览器将采用第一个定义值。“

界面与前端

HTML4标签的默认样式列表

[code]

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block }
li 　{ display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell; }
caption { display: table-caption }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { margin: 8px; line-height: 1.12 }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address { font-style: italic }
pre, tt, code,
kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea,
input, object,
select { display:inline-block; }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
table { border-spacing: 2px; }
thead, tbody,
tfoot { vertical-align: middle }
td, th { vertical-align: inherit }
s, strike, del { text-decoration: line-through }
hr { border: 1px inset }
ol, ul, dir,
menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "\A" }
:before, :after { white-space: pre-line }
center { text-align: center }
abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
@media print {
h1 { page-break-before: always }
h1, h2, h3,
h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }
}

[/code]

界面与前端

语义
声明文档类型，让浏览器知道你使用哪个版本的HTML。如果你没用指定或者指定了一个错误的文档类型，则浏览器会假设你并不知道自己在干什么，并且自动切换到“变通模式（quirks mode）”，结果会有一些元素不能被正确地渲染。显然这样做显得很“宽容”，但事实上却带来很多混乱和不确定的因素。

和其他所有的标签不同，DOCTYPE必须按照特定样子书写（包括大小写），请参照下面的示例

英文原意

[color=Blue]Document Type
文档类型

结构

此元素必须放置在HTML文档的开头，在其他所有元素之前。
必选属性

无
可选属性

无
示例

XHTML Transitional

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

XHTML Strict

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

界面与前端

在IE环境的默认情况下,
html和 textarea的overflow-y 值为 overflow-y:scroll;
因此，如果觉得HTML和textarea的那个滚动条不爽，可以这样写一下：

[code]
html {overflow-y:hidden;}
textarea {overflow-y:hidden;}
[/code]

在Firefox环境的默认情况下，
所有的对象的overflow的默认值都是overflow:visible;
大概是这样

互联网, 界面与前端

Web标准这个话题被讨论的越来越多，究竟怎样定义这个概念呢？ 看看Jeffery怎么说的：

Web标准是指结构化的语言(如XHTML和XML)，解释性语言(如CSS)，对象模型(W3C DOM)和脚本语言(ECMAScript)。
—-Jeffery Zeldman

　　Web标准的最初目标，是为了统一同一网页在各种浏览器中的显示，结束浏览器显示web页面的任意性，保证站点为更多的人和更多的平台工作。Web标准承诺：“写一次，即可发表在任何地方”。

Web标准把网页分成三个独立组成部分：

结构：HTML，XHTML，XML
表现：CSS1，CSS2
行为：ECMAScript, DOM

　　Web标准至今汉有对外观审美做任何指导方针和戒律，对站点的外观和感觉没有做任何限制，它们只不过使浏览器能够正确地表现设计师创建的站点，帮助客户根据公司的市场需求和用户分析来制定目标。

Web标准可以做到：

• 在图形浏览器上更精确的控制、定位和排版
• 复杂的交互行为
• 可访问性
• 支持多种浏览器
• 新、旧浏览器都可以工作
• 保证可以工作在将来的游览器上
• 重新设计网站时间缩短
• 支持非传统设备
• 易为任何网页提供适合打印的版本
• 在发布流程中易重新设计文档
• HTML转换到XML基础的置标语言

web标准的原因：

• 增强交互能力
• 增强可访问性
• 减少维护工作量
• 减少带宽
• 降低成本

互联网, 界面与前端

设BOX宽度为300px，在IE5.x浏览器中，对BOX的宽度解释有个bug，它认为300 px是BOX的总宽度，内容的宽度变成：300-2*10-2*5=270px,在ie6.0、firefox、opera8.0中显示box1的总宽度为330px，等于BOX实际的总宽度，内容的宽度：300px。所以可把宽度写成width: 330px; w\idth: 300px;，后一个宽度ie5.x不会解析。下面实例中BOX1是没有修正的，BOX2是修正过的。如果你用ie5.x,会发现二个BOX宽度是不一样的。

#box1{
background: #EEEEEE;
width: 300px;
border: solid 5px #999999;
padding: 10px;
}

#box2{
background: #EEEEEE;
width: 330px;
w\idth: 300px;
border: solid 5px #999999;
padding: 10px;
}

互联网, 界面与前端

地址http://css.maxdesign.com.au/index.htm
看了就知道拉~~~

互联网, 界面与前端