不必要的邊界

<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

不必要的邊界

回答

相關問題