图像边框宽度边框：无？

时间：2013-05-16 07:10:41

标签： html css

编辑： 更多我的HTML＆amp; 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代码，请参阅我的浏览器：

enter image description here

你可以在这里查看。

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

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

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

6 个答案:

答案 0 :(得分：2)

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

答案 1 :(得分：2)

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

答案 2 :(得分：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;
}

答案 3 :(得分：2)

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

img { border-width: 0; }

答案 4 :(得分：2)

边框不是由发布的代码引起的（无论如何都是有缺陷的 - img元素没有src且没有alt是无意义且无效的。它是由其他地方的某些设置引起的，这种设置会导致border-style设置为none以外的其他设置，从而覆盖问题中包含的CSS规则。

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

答案 5 :(得分：1)

只能在<a></a>中使用 #owner 和 .drop-down-link ，因为您还可以申请在 .drop-down-link 到 #owner 的CSS中，为什么要同时使用它们呢？ 例如，您选择 #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;}

如果您想同时使用#owner和.drop-down-link，那么无论如何都会没问题。 :)

相关问题
最新问题