HTML+CSS 工作笔记

遇到问题汇总

一，HTML

1. 如果要设置span的宽度，必须要将display:inline-block; 当前也可以设置为：display : block不过他就不是行内元素了所以他会换行。
2. 要设置table的列宽度，只需要设置第一列的宽度是多少，后面的行都一样了。

二，CSS

1. 取消 li 的 圆圈方式：ul{list-style-type:none;}
2. s
3. s

CSS Hack:

首先是关于CSS在各浏览器之间的兼容问题,以下是具体代码。

select {
background-color:red\0;  /* ie 8/9*/
background-color:blue\9\0;  /* ie 9*/
*background-color:#dddd00;  /* ie 7*/
_background-color:#CDCDCD;  /* ie 6*/
}

*+html #bgcolor {
    background:green !important; /* IE7 */background-color::brown\9; //所有IE浏览器
}
 
/* Opera */
html:first-child #opera
{
display: block;
}
/* IE 7 */
html > body #ie7
{
*display: block;
}
/* IE 6 */
body #ie6
{
_display: block;
}
/* Firefox 1 - 2 */
body:empty #firefox12
{
display: block;
}
/* Firefox */
@-moz-document url-prefix()
{
#firefox { display: block; }
}
/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#safari { display: block; }
}
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
head~body #opera { display: block; }
}

 

注意写hack的顺序，其中：

1. background-color:red\0;IE8和IE9都支持； IE6、IE7不能.

2. background-color:blue\9\0; 仅IE9支持；

3. "*" IE6、IE7可以识别.IE8、FireFox不能.

4. "_" IE6可以识别"_",IE7、IE8、FireFox不能.

5. IE7 认 !important, 也认 *+html, 优先度: (*+html + !important) > !important > +html

HTML界面骨架

          往往在HTML布局方面其实最主要就是运用HTML标签的结构出了问题，比如说今天(2011.8.25)我就出现了这样的问题，先给自己找哈借口可能有1，2年没有写WEB的原因。 

           其实要实现的功能很简单就是如下效果:

结果可能调了1个多小时都没搞定，最后只有请求同学帮忙。 我开始的HTML结构是<div>+<a>+<span>…  a的背景图片为框框,span 设置高度宽度来做箭头，结果老是没有变法办规矩，出现这样的效果，。具体原因我也不清楚是怎么回事。而同学给我的HTML结构却是<div>+<table><td><a></td><td><span></td>… 最终解决了战斗。

         说说为什么他这样能很快的搞定，他充分的运用了HTML每个标签的特性，要实现这类连续的东西，其实TABLE就很快能搞定。如果你不喜欢用TABLE其实还有另一种解决方案，那就是用UL+LI 也同样可以实现。