원치 않는 국경

<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 나는 img src="blabla"가 문제 ... 핸들을 사용하고 템플릿은 4 번 ... 네 번째 "normal-box" 콘텐츠가없는로드되는 웹 서비스를원치 않는 국경

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

따라서 이미지가 없으므로 문제가됩니다. 이미지가 비어 있어야하지만 원치 않는 테두리가 있어야합니다 ... pic

출처

2016-07-06 Sebastian Ampuero Morisaki

jsFiddle을 만들거나 라이브 예제에 연결할 수 있습니까? –

img를 찾을 수 없을 때의 브라우저 기본값. 이 문제를 해결하는 한 가지 방법은 투명 배경이있는 .png 사진을 사용하는 것입니다 (빈 .png 이미지와 "blabla"로 처리해야 함) –

0을 사용하십시오. 그런 다음 여러 "멘사 이미지"이미지를 생성하는 경우 대신

border: 0;

없음

의

또한

border: none;

, 당신은 ID 대신 클래스를 사용한다 없습니다.

@Lowcase 쓴 것처럼

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

, 당신이 ID를 여러 번 사용해서는 안 :

출처

2016-07-06 13:45:26 Lowkase

은 id를 삭제하고 none 대신 0을 추가했지만 테두리는 여전히 있습니다./ –

@SebastianAmpueroMorisaki 라이브 예제를 만듭니다. 따라서 솔루션을 편집하고 테스트하기가 쉽습니다. –

ID를 .... class = "mensa-image"로 바꿉니다. 그런 다음 CSS에서 .mensa-image {border : 0; } – Lowkase

대신 CSS 규칙을 시도하고 이미지에서 ID를 제거 : (부분적으로)

.mensa-image img { 
    border: none; 
}

및 HTML (텍스트 span과 동일, BTW). 단순히 ID를 제거하면 위의 규칙이 적용됩니다.

출처

2016-07-06 13:47:56 Johannes

내 편집 된 답변에 유의하십시오 (여러 번 편집 - 혼란스럽게 생각합니다) – Johannes

이미지가없는 경우 브라우저의 작업입니다. 가장 쉬운 수정은 투명한 .png를 추가하는 것입니다.

출처

2016-07-06 14:06:17

문제의 원인을 실제로 해결하는 유일한 대답 – Pete

원치 않는 국경

답변

관련 문제