发新话题
打印

关于li前图标文件的不同浏览器错位问题

关于li前图标文件的不同浏览器错位问题

html页的代码:

<div id="left">
  <ul>
     <li class="li_bg"><a href="../intro/index.html"><span>公司简介</span></a> </li>
     <li><a href="../news/index.html">业务综述</a></li>
     <li><a href="../wuliu/index.html">组织结构</a></li>
     <li><a href="../jinchukou/index.html">业务流程</a></li>
     <li><a href="../jiandan/index.html">商务留言</a></li>
  <li></li>
  </ul>
  </div>
css文件内的代码:

#left li {
font-size: 14px;
line-height: 32px;
background-image: url(../images/line_left.gif);
background-repeat: repeat-x;
width: 175px;
}
#left a {
background-image: url(../images/arrow.gif);
background-repeat: no-repeat;
background-position: 2px center;
width: 110px;
color: #000;
text-indent: 4px;
}

在ie下是我希望显示的如图:

附件

ie.gif (3.19 KB)

2007-11-13 10:23

ie.gif

齐白石、张大千、朗世宁在这一刻灵魂附体、我自轻狂一个人,他代表了中国动漫的悠久的历史传统.

TOP

可在firefox下的红箭头就进入文字行内了。。。郁闷啊

齐白石、张大千、朗世宁在这一刻灵魂附体、我自轻狂一个人,他代表了中国动漫的悠久的历史传统.

TOP

firefox下的效果

因为我提前给li定义了一个背景红色虚线。所以要表示红色箭头只好用<a>标签了

附件

firefox.gif (10.9 KB)

2007-11-13 10:26

firefox.gif

齐白石、张大千、朗世宁在这一刻灵魂附体、我自轻狂一个人,他代表了中国动漫的悠久的历史传统.

TOP

#left li {
font-size: 14px;
line-height: 32px;
background-image: url(../images/line_left.gif);
list-style-image: url(../images/arrow.gif);
background-repeat: repeat-x;
width: 175px;
}
#left a {
width: 110px;
color: #000;
text-indent: 4px;
}
我擦一擦嘴巴,不留下一颗饭粒~

TOP

qingjiao le
齐白石、张大千、朗世宁在这一刻灵魂附体、我自轻狂一个人,他代表了中国动漫的悠久的历史传统.

TOP

或者有其他的解决方案也可以啊。。。
齐白石、张大千、朗世宁在这一刻灵魂附体、我自轻狂一个人,他代表了中国动漫的悠久的历史传统.

TOP

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>



<style type="text/css">
<!--
#left li {
        font-size: 14px;
        line-height: 32px;
        background-image: url(dian.gif);
        background-repeat: repeat-x;
        width: 175px;
        list-style-type: none;
}
#left a {
        background: url(dian.gif) no-repeat 2px center;

        width: 110px;
        color: #000;
        text-indent: 4px;
        display: block;
        padding-left: 10px;
}

-->
</style>
</head>

<body>
<div id="left">
  <ul>
     <li class="li_bg"><a href="../intro/index.html"><span>公司简介</span></a> </li>
     <li><a href="../news/index.html">业务综述</a></li>
     <li><a href="../wuliu/index.html">组织结构</a></li>
     <li><a href="../jinchukou/index.html">业务流程</a></li>
     <li><a href="../jiandan/index.html">商务留言</a></li>
  <li></li>
  </ul>
  </div>

</body>
</html>

试试!!!

TOP

在上面2位的指导下成功了!多谢多谢二位
齐白石、张大千、朗世宁在这一刻灵魂附体、我自轻狂一个人,他代表了中国动漫的悠久的历史传统.

TOP

发新话题