一,HTML
- 如果要设置span的宽度,必须要将display:inline-block; 当前也可以设置为:display : block不过他就不是行内元素了所以他会换行。
- 要设置table的列宽度,只需要设置第一列的宽度是多少,后面的行都一样了。
二,CSS
- 取消 li 的 圆圈方式:ul{list-style-type:none;}
- s
- s
首先是关于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的顺序,其中:
-
background-color:red\0;IE8和IE9都支持; IE6、IE7不能.
-
background-color:blue\9\0; 仅IE9支持;
-
"*" IE6、IE7可以识别.IE8、FireFox不能.
-
"_" IE6可以识别"_",IE7、IE8、FireFox不能.
-
IE7 认 !important, 也认 *+html, 优先度: (*+html + !important) > !important > +html
-
往往在HTML布局方面其实最主要就是运用HTML标签的结构出了问题,比如说今天(2011.8.25)我就出现了这样的问题,先给自己找哈借口可能有1,2年没有写WEB的原因。
其实要实现的功能很简单就是如下效果:
结果可能调了1个多小时都没搞定,最后只有请求同学帮忙。 我开始的HTML结构是
… 最终解决了战斗。 |