1

编辑：更多我的 HTML 和 CSS 代码。

 <div id="wrapper">
            <ul class="menu_pro">
              <li class="homepage"><?php echo link_to('Accueil', 'homepage/index', array('id' => 'homepage')); ?></li>
              <li class="owner"><a class="drop-down-link" href="#">Propriétaire<img class="arrow" /></a>
                <ul class="drop-down">
                  <li class="subitem1"><?php echo link_to('Liste Globale', 'owner/list', array('id' => 'owner_global_list')); ?></li>
                  <li class="subitem2"><?php echo link_to('Fiche personnelle', 'owner/sheet', array('id' => 'owner_personnal_sheet')); ?></li>
                </ul>
              </li>
              <li class="client"><a id="client" class="drop-down-link" href="#">Client<img class="arrow" /></a>
                <ul class="drop-down">
                  <li class="subitem1"><?php echo link_to('Liste Globale', 'client/list', array('id' => 'client_global_list')); ?></li>
                  <li class="subitem2"><?php echo link_to('Fiche personnelle', 'client/sheet', array('id' => 'client_personnal_sheet')); ?></li>

                </ul>
              </li>
              <li>
              </li>
              .
              .
            </ul>
           </div>

现在是我的 CSS 的一部分：

a { text-decoration: none; border:none; color:#888; }
a img { border:none; border-width: 0;}
#wrapper { margin-bottom:20px; list-style:none; position:absolute; width:190px; font-size:1.1em; border-right:1px solid black; padding: 30px 20px 30px 20px; margin-right:5px; background-color:rgba(0, 143, 147, 0.6); display:block; }
.menu_pro { list-style:none; width:auto; height:auto; -webkit-box-shadow:0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); -moz-box-shadow:0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); box-shadow:0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); }
.menu_pro > li > a { text-decoration: none; background-color: #616975; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100))); background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864'); border-bottom: 1px solid #33373d; -webkit-box-shadow: inset 0px 1px 0px 0px #878e98; -moz-box-shadow: inset 0px 1px 0px 0px #878e98; box-shadow: inset 0px 1px 0px 0px #878e98; width:100%; height:3em; line-height:3em; text-indent:1.2em; display:block; position:relative; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:600; color:#fff; text-shadow:0px 1px 0px rgba(0,0,0,.5); }
.menu_pro ul li a { text-decoration:none; background:#a5bef2; width:100%; height:3em; line-height:3em; text-indent:1.5em; display:block; position:relative; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size:0.923em; font-weight:400; color:black; }
.menu_pro ul li:last-child a { border-bottom: 1px solid #33373d; }
.menu_pro > li > ul li:hover a, .menu_pro > li > ul li:hover a span, .menu_pro > li > ul li:hover a:before { color:yellow; }
.menu_pro > li > a:hover,.menu_pro > li > a.active { background-color:#35afe3; background-image:-webkit-gradient(linear, left top, left bottom, from #f60070),to #e2007a)); background-image:-webkit-linear-gradient(top, #f60070, #e2007a); background-image:-moz-linear-gradient(top, #f60070, #e2007a); background-image:-o-linear-gradient(top, #f60070, #e2007a); background-image:-ms-linear-gradient(top, #f60070, #e2007a); background-image:linear-gradient(top, #f60070, #e2007a); filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db'); border-bottom:1px solid #103c56; -webkit-box-shadow:inset 0px 1px 0px 0px #6ad2ef; -moz-box-shadow:inset 0px 1px 0px 0px #6ad2ef; box-shadow:inset 0px 1px 0px 0px #6ad2ef; }
.menu_pro > li > a.active { border-bottom: 1px solid #1a638f; }
.menu_pro > li > a span { font-size:0.857em; display:inline-block; position:absolute; right:1em; top:0%; background:#48515c; line-height:1em; height:1em; /* padding:.4em .6em; margin:-.8em 0 0 0;*/ color:#fff; text-indent:0; text-align:center; -webkit-border-radius:.769em; -moz-border-radius:.769em; border-radius:.769em; -webkit-box-shadow:inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15); -moz-box-shadow:inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15); box-shadow:inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15); text-shadow:0px 1px 0px rgba(0,0,0,.5); font-weight:500; }
.menu_pro > li > a:hover span, .menu_pro > li a.active span { background:#2173a1; }
.menu_pro ul > li > a span { font-size:0.857em; display:inline-block; position:absolute; right:1em; top:50%; / background:#fff; border:1px solid #d0d0d3; line-height:1em; height:1em; padding:.4em .7em; margin:-.9em 0 0 0; color:#878d95; text-indent:0; text-align:center; -webkit-border-radius:.769em; -moz-border-radius:769em; border-radius:769em; text-shadow:0px 0px 0px rgba(255,255,255,.01)); }
.subitem1, .subitem2, .subitem3_, .subitem4, .subitem5, .subitem6, .subitem3 { border-bottom: 1px solid #efeff0; list-style:none; }
.subitem1 a:before, .subitem2 a:before, .subitem3 a:before, .subitem4 a:before, .subitem5 a:before, .subitem6  a:before, .subitem3_a:before { content:'▶'; font-size:8px; color:red; position:absolute; width:1em; height:1em; top:0; left:-1.5em; }
.submit, a.submit { background-color:#707173; color:white; padding:5px 6px; border:none; text-decoration:none; }

.drop-down-link { border:none; }
.arrow img { border:none; border-width: 0;}

我已经尝试在我的代码中添加一些你的建议，从现在开始没有任何好的结果。

@bot 看，我添加了我认为的 CSS 代码，请在我的浏览器上查看：

在此处输入图像描述

你可以在这里查看。

//////////////

http://jsfiddle.net/BVYFZ/ 更新：http: //jsfiddle.net/BVYFZ/5/

/////////////

4

6 回答 6

2

您的图像周围有一个链接，所以：#owner{border:none;} 会解决它

于 2013-05-16T07:11:55.397 回答
2

我猜你会看到链接边框。不是图像边框。尝试删除链接进行测试。在这种情况下，边框应该消失。

于 2013-05-16T07:13:02.217 回答
2

尝试这个，

HTML

<a id="owner" class="drop-down-link" href="#">Click me</a>

CSS

#owner{
background-image: url(next.png);
background-repeat: no-repeat;
background-position-x: 51px;
position: absolute;
z-index: 1;
width: 100px;
background-size: 18px;
}

a
{
text-decoration:none;
}
于 2013-05-16T07:28:42.967 回答
2

将图像的边框宽度设置为零

img { border-width: 0; }
于 2013-05-16T07:30:00.037 回答
2

边界不是由发布的代码引起的（无论如何这都是有缺陷的——没有和没有的img元素是毫无意义和无效的）。它是由其他地方的某些设置引起的，该设置导致设置为 之外的其他内容，覆盖问题中包含的 CSS 规则。srcaltborder-stylenone

您可以通过单独测试您的代码来看到这一点，即在一个只包含该代码（和强制性手续）的文档中。

于 2013-05-16T07:46:09.460 回答
1

仅使用#owner和.drop-down-link中的任何一个来使用，<a></a>
因为您也可以将.drop-down-link的 css 中的内容应用到#owner那么为什么要同时使用它们呢？例如，您选择#owner并删除.drop-down-link您可以在您的 css 中使用它

#owner {some style here you could add the css of .drop-down-link here so to use only one id/class}
#owner img {border:none;}

或者为此删除边框的最佳选择是识别包装在<a></a>示例之外的包装器：

<div class="wrapper">
<a id="owner" href="#">Propriétaire<img source /></a>
</div>

所以CSS是

.wrapper {some style here }
.wrapper img{ border:none;}

PS如果你想同时使用 #owner 和 .drop-down-link 无论如何都可以。:)

于 2013-05-16T07:26:17.350 回答