Question

<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"没有内容因此没有图像（没关系）..问题是，由于它没有图像，放置图像的div应该是空白的，但是有一个不需要的边框...这是一个图像，看起来像pic

Answer 1

使用0而不是

border: 0;

不

border: none;

另外，如果你正在生成多个＆＃34; mensa-image＆＃34;然后你应该使用类而不是ID。

Answer 2

请尝试使用此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，BTW也是如此）。如果您只是删除ID，则上述规则应该有效。

Answer 3

当没有找到图像时，这是浏览器的工作。最简单的解决方法是添加透明的.png。

图像css造型上不需要的边框

3 个答案: