不必要的边界

<script id="canteen_card_row_template" type="text/html"> 
     <div class="normal-box"> 
         <div class="subtitle-box"> 
          <div class="mensa-img"> 
           <img src="{{type.[0].image}}" id="mensa-image"> 
          </div><span class="options-title" id="mensa-text">{{title.de_DE}}</span> 
         </div> 
         <div class="side-text-box"> 
          <span class="side-text">{{price.student}}€</span> 
         </div> 
         <div class="small-text"> 
          <span class="normal-text" id="mensa-text">{{content}}</span> 
         </div> 
     </div> 
    </script>

CSS不必要的边界

#mensa-image{ 
height: 13px; 
width:13px; 
border: none !important;}

这个问题我已经在那里img src="blabla"是...利用车把和模板加载4次。第四"normal-box"没有内容的Web服务因此没有图像（多数民众赞成）..问题是，因为它没有图像的div图像放置应该是空白的，但有一个不需要的边框，而不是...这是它看起来像一个图像pic

来源

2016-07-06 Sebastian Ampuero Morisaki

你可以制作一个jsFiddle或链接到一个现场示例吗？ –

未找到img时的浏览器默认值。解决这个问题的一种方法是使用带有透明背景的.png照片（您需要做空.png图像并将其添加到“blabla”） –

使用0代替无

border: 0;

不

border: none;

此外，如果要生成多个“门萨图像”上的图像，那么你应该使用ID的类代替。

来源

2016-07-06 13:45:26 Lowkase

删除了id并添加了0而不是none，但边框仍然存在：/ –

@SebastianAmpueroMorisaki创建一个实例，因此很容易编辑和测试解决方案 –

用.... class =“mensa-image”替换ID。然后在你的CSS .mensa-image {border：0; } – Lowkase

试试这个CSS规则，而从图像中删除ID：

.mensa-image img { 
    border: none; 
}

和HTML（部分）：

<div class="subtitle-box"> 
    <div class="mensa-img"> 
    <img src="{{type.[0].image}}"> 
    </div> 
    <span class="options-title">{{title.de_DE}}</span> 
</div>

由于@Lowcase写道，你不应该使用一个ID多次（相同的文字span，顺便说一句）。如果您只是删除该ID，则上述规则应该起作用。

来源

2016-07-06 13:47:56 Johannes

请注意我编辑的答案（多次编辑 - 对不起，我感到困惑） – Johannes

这就是没有找到图像时浏览器的工作。最简单的修复就是添加一个透明的.png。

来源

2016-07-06 14:06:17

实际上解决问题原因的唯一答案 – Pete

不必要的边界

回答

相关问题