打印

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

我自轻狂

中级会员

Rank: 3 Rank: 3

帖子: 1918
积分: 266
技术分: 44
来自: 天津
在线时间: 171 小时
注册时间: 2003-5-8

1^# 大中小发表于 2007-11-13 10:23 只看该作者

关于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

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

TOP

我自轻狂

中级会员

Rank: 3 Rank: 3

帖子: 1918
积分: 266
技术分: 44
来自: 天津
在线时间: 171 小时
注册时间: 2003-5-8

2^# 大中小发表于 2007-11-13 10:24 只看该作者

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

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

TOP

我自轻狂

中级会员

Rank: 3 Rank: 3

帖子: 1918
积分: 266
技术分: 44
来自: 天津
在线时间: 171 小时
注册时间: 2003-5-8

3^# 大中小发表于 2007-11-13 10:26 只看该作者

firefox下的效果

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

附件

firefox.gif (10.9 KB)

2007-11-13 10:26

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

TOP

Sam_appleseed

注册会员

Rank: 2

帖子: 293
积分: 57
技术分: 2
来自: 月球背面
在线时间: 249 小时
注册时间: 2007-9-29

4^# 大中小发表于 2007-11-13 14:26 只看该作者

#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

我自轻狂

中级会员

Rank: 3 Rank: 3

帖子: 1918
积分: 266
技术分: 44
来自: 天津
在线时间: 171 小时
注册时间: 2003-5-8

5^# 大中小发表于 2007-11-13 15:13 只看该作者

qingjiao le

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

TOP

我自轻狂

中级会员

Rank: 3 Rank: 3

帖子: 1918
积分: 266
技术分: 44
来自: 天津
在线时间: 171 小时
注册时间: 2003-5-8

6^# 大中小发表于 2007-11-15 08:44 只看该作者

或者有其他的解决方案也可以啊。。。

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

TOP

xpoqx

注册会员

Rank: 2

帖子: 41
积分: 10
技术分: 1
在线时间: 28 小时
注册时间: 2006-8-5

7^# 大中小发表于 2007-11-15 14:16 只看该作者

<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">

</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

我自轻狂

中级会员

Rank: 3 Rank: 3

帖子: 1918
积分: 266
技术分: 44
来自: 天津
在线时间: 171 小时
注册时间: 2003-5-8

8^# 大中小发表于 2007-11-19 11:18 只看该作者

在上面2位的指导下成功了！多谢多谢二位

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

TOP