遇到问题汇总
一,HTML
- 如果要设置span的宽度,必须要将display:inline-block; 当前也可以设置为:display : block不过他就不是行内元素了所以他会换行。
- 要设置table的列宽度,只需要设置第一列的宽度是多少,后面的行都一样了。
二,CSS
- 取消 li 的 圆圈方式:ul{list-style-type:none;}
- s
- 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的顺序,其中:
-
-
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布局方面其实最主要就是运用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 也同样可以实现。