1,问题描述
需求:在网站上添加相关验证图标,需要横排居中格式
2,分析
本来是个小case,虽然本人不是做前台技术的,但是多多少少还是用过DIV、CSS的,所以,一看用<ul>格式吧。
经过无数次调整,效果出来了。
代码如下:
<div style="width:100%; margin-bottom:10px;margin:0 auto;vertical-align:middle;margin-top:20px"> <ul> <li style="display:inline-block; vertical-align:middle;"><a href="" target=_blank><img src="../Default/images/315new.GIF"/></a></li> <li style="display:inline-block;vertical-align:middle;"><a href="" target=_blank><img src="../Default/images/bluelogo.gif"/></a></li> <li style="vertical-align:middle;display:inline-block;"><a href="" target=_blank><img src="../Default/images/Credit.jpg"/></a></li> </ul> </div> 相当简单,之所以没有把CSS写成文件,是由于这个网站构架较大,网页包含异常多,所以格式文件不太好找,而且本来是一个小东西不去折腾了。当会美工,呵呵,打开chromium,yeah
但是,一会,同事说怎么是竖排的?我一看在IE下果然如此,但是在火狐,chrome下全部正常,话说最标准格式应该是chrome浏览器了,但是谁叫微软是老大呢,蛋疼。
3,分析一下,应该是<ul><li>格式支持不太兼容,换成简单的<span>
代码:
<div style="width:100%; margin-bottom:10px;margin:0 auto;vertical-aspangn:middle;margin-top:20px"> <span style="display:inspanne-block; vertical-aspangn:middle;"><a href="" target=_blank><img src="../Default/images/315new.GIF"/></a></span> <span style="display:inspanne-block;vertical-aspangn:middle;"><a href="" target=_blank><img src=".../Default/images/bluelogo.gif"/></a></span> <span style="vertical-aspangn:middle;display:inspanne-block;"><a href="" target=_blank><img src=".../Default/images/Credit.jpg"/></a></span> </div> 问题解决,简单事情还是简单好点,其实对CSS支持最好的还是chrome,浏览速度也很快