CSS 使用笔记 IE7，IE8，Firefox

CSS使用笔记

    最近做网站项目，用到一些CSS技巧，为了帮助以后使用同时也为了让别人节约调试时间，把项目中的一些用例记录下来。

    1、table内容为空时，IE中tabale属性失效。加入如下代码会生效（本人用法，如有更好方法，希望分享）

<table id="detail" rules="none" frame="void">

 

     2、滚动新闻条列间距大小一致，jsp代码及CSS代码。

<div class="content" id="marquee_demo">
      <table cellspacing="0" cellpadding="3" align="center" border="0">
	<tbody>
	<tr>
		<td id="marquee_product1" valign="top">
			<table class="release" style="margin-bottom: -8px;



">
				<c:forEach items="${productsRelease}" var="productTemp" >
				<tr>
				 <td class="target" align="left" >
				   <a href="${pageContext.request.contextPath}/products/catalog/${productTemp.catalog}_${productTemp.title}">
				     <img src="${pageContext.request.contextPath}/css/images/release.png"/>
				      <span>${productTemp.title}</span>
				     </a>
				     </td>
			    </tr>
			</c:forEach>
          				</table>
					</td>
				</tr>
				<tr>
					<td id="marquee_product2" valign="top">&nbsp;</td>
				</tr>
				</tbody>
			</table>
         </div>

     CSS代码：

 

.release{margin:0px;padding:0px;height:18;table-layout:fixed;word-break:break-all;}
.release .target{text-align:left;height:15px;width:236px; line-height:15px;border-bottom:1px dotted #CFCFCF;text-indent:3px; color:#F5A11B;}
.release .target span{color:#F3A119;}

 注：红色字体为控制新闻列表中第一条和最后一条的衔接距离。

3、图片拼接，jsp页面代码和CSS代码

 

<div class="searchImage">
         		<img src="${pageContext.request.contextPath}/images/search_L.jpg" style="margin-left:6px;"/>
				<input type="text" id="fulltextw" value="${fulltext}"/>
				<img class="hand search" src="${pageContext.request.contextPath}/images/search_R.jpg" onclick="search();"/>
         	</div>

 

    CSS代码：

.searchImage{margin-left:12px;margin-top:6px;width:220px;}
.searchImage img{float:left;}
.searchImage .search {float:left;margin-right:0px;}
.searchImage input{float:left;background-image:url(../images/search_M.jpg);border:0px;line-height: 22px;width:178px;}

 

4、IE6下背景色为透明图片显示问题，只有图片格式为gif的，背景才显示为透明。    

5、新页面打开 target=_blank

 

6、隔行显示不同颜色

    jQuery(".tableList tr:old").addClass("evenTR");

    class="tableList "的偶数行。显示为css中"evenTR"属性特征。

 

jquery表格奇数偶数行换色
$("tr:odd").addClass("odd"); 对奇数行加class样式
$("tr:even").addClass("even");对奇偶数行加class样式

 

 

    jQuery(".tableList tr:even").addClass("evenTR");

     class="tableList "的奇数行。显示为css中"evenTR"属性特征。

本人也是初学CSS，在以后项目用到技巧时，会继续添加，您有什么好的建议也可以联系本人。