JQuery 模板与 css 设置不当造成 jQuery Ui 不能正常显示

最近用php jQuery css编写程序，发现有些jQuery UI 不能正常使用，用了我三天时间才找出原因，相关代码如下：

<style>

#sel_pro span{
    border:1px solid #aaa;
background:#ddd;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
padding:5px 15px;
}

</style>

<!--单个产品综合信息模板-->
<script type="text/x-jquery-tmpl" id="aprotitleTemplate">
<div id='sel_pro_title'>${classname}${name} - ${size()}</div>
<div id="sel_pro">
<img class="pic" src="admin/uploadimg/${image}" alt="${name}" />
<p>产品编号：${id}</p>
<p>产品价格：<b>¥</b>${price} 元/${unit}</p>
<p>产品评价：{{html imgStar()}} (已有 ${evaltimes} 人参与评价)</p>
<p>购买数量：<input id="salenumber" name="value" /></p>
<p>{{if sale=='Y'}}<button id="btnAddOrder">加入订单</button>{{else}}<span>已下架</span>{{/if}} 
<button id="btnAddCare">加关注</button>
</p>
</div>
</script>

当设置样式 #sel_pro span 时 jQuery UI 显示导常，#sel_pro span 不设置时显示正常。