이미지 주위에 파란색 프레임을 표시하지 않는 방법은 무엇입니까?

나는 공중 선회 할 때 나는 그것을 손에 커서 변화를 만들 수있는 링크를 만든 이후 디스플레이 내 이미지 주위에 파란색 프레임을 렌더링하는 팝업 달력에 대한 링크 인 이미지를 가지고 : enter image description here 이미지 주위에 파란색 프레임을 표시하지 않는 방법은 무엇입니까?

는 CSS는

.avnamn { 
color:arial #90002b; 
font-size:140%; 
display:inline; 
vertical-align:3%; 
margin-left:1%; 
} 

.b { 
border:1px solid #000; 
} 

.Webdings { 
font-family:Webdings; 
} 

ul { 
margin-top:0; 
} 

.mt3 { 
margin-top:-3px; 
} 

.mt5p { 
margin-top:5px; 
} 

.fontS80 { 
font-size:80%; 
} 

.link { 
color:#036; 
text-decoration:underline; 
cursor:pointer; 
font-weight:700; 
} 

.link_sm { 
color:#036; 
text-decoration:underline; 
font-size:70%; 
cursor:pointer; 
} 

.smallg { 
font-size:75%; 
color:#555; 
} 

.ssmall { 
font-size:65%; 
font-weight:700; 
color:#555; 
} 

.small60 { 
font-size:60%; 
} 

.small50 { 
font-size:50%; 
color:#333; 
} 

.smallb { 
font-size:85%; 
} 

table { 
display:inline; 
} 

h1 { 
font-size:130%; 
display:inline; 
} 

h2 { 
font-size:100%; 
display:inline; 
} 

h4 { 
font-size:70%; 
display:inline; 
} 

.hthin { 
font-size:125%; 
} 

.th { 
text-align:left; 
} 

td,th { 
font-size:75%; 
vertical-align:text-top; 
} 

.td_link { 
cursor:pointer; 
} 

.td40 { 
height:40px; 
} 

.td60 { 
height:60px; 
} 

.thkant { 
border-top:1px solid #000; 
border-bottom:1px solid #000; 
font-size:70%; 
text-align:left; 
} 

.bb { 
border-bottom:1px solid #000; 
} 

.bbV { 
border-bottom:1px solid #FFF; 
} 

.TB_bt,.TB_nb,.TB_db,.TB_bb { 
background-color:#efefdc; 
} 

.hk { 
background-color:#d9ddb3; 
} 

.hknot { 
background-color:#f9faf2; 
} 

.TB_bt { 
border-top:1px solid #FFF; 
} 

.TB_bt5 { 
border-top:5px solid #FFF; 
} 

.TB_bb { 
border-bottom:1px solid #999; 
} 

.TB_bb2 { 
border-bottom:2px solid #c1c1b3; 
} 

.TB_db { 
border-bottom:1px solid #000; 
border-top:1px solid #000; 
} 

.TB_tb { 
border-top:2px solid #efefdc; 
} 

.TB_bo_hk { 
border-top:1px solid #efefdc; 
} 

.TB_bo2 { 
border:1px solid #efefdc; 
} 

.TB_bo2B { 
border-top:2px solid #c1c1b3; 
border-left:3px solid #efefdc; 
border-right:3px solid #efefdc; 
border-bottom:2px solid #c1c1b3; 
} 

.TD_bo { 
border-right:1px solid #c1c1b3; 
width:9%; 
font-size:70%; 
text-align:center; 
} 

.TD_bo2 { 
border-right:0; 
width:9%; 
font-size:70%; 
text-align:center; 
} 

.ytb { 
border-left:3px solid #efefdc; 
border-right:3px solid #efefdc; 
} 

.datum { 
font-size:70%; 
padding-right:5px; 
vertical-align:text-top; 
} 

.sub { 
background:#EAEAEA; 
} 

.sub_meny,.sub_meny_r,.sub_meny_active,.sub_meny_sm { 
font-size:70%; 
padding-left:20px; 
padding-right:20px; 
vertical-align:text-top; 
} 

.sub_meny_sm { 
font-size:60%; 
vertical-align:middle; 
padding-left:10px; 
padding-right:10px; 
} 

.sub_meny_r { 
float:right; 
font-size:70%; 
padding-left:8px; 
padding-right:8px; 
} 

.sub_meny_rm { 
margin-top:4px; 
} 

.sub_meny_active { 
font-weight:700; 
} 

.flikkant1 { 
background-image:url(../images/fl1k.jpg); 
background-position:center; 
z-index:-1; 
} 

.inl_namn { 
font-weight:700; 
font-size:70%; 
color:#000; 
text-decoration:none; 
} 

.tr { 
text-align:right; 
} 

.g1 { 
background-color:#FFF; 
line-height:20px; 
} 

.g2 { 
background-color:#EEE; 
line-height:20px; 
} 

.g3 { 
background-color:#DCDCDC; 
line-height:20px; 
font-weight:700; 
font-size:100%; 
} 

.g4 { 
background-color:#CCC; 
line-height:20px; 
} 

.popup { 
background-color:#FFF; 
font-size:70%; 
border-color:#000; 
border-style:groove; 
border-width:2px; 
padding:0; 
} 

.popupN { 
background-color:#F0F0E3; 
color:#000; 
width:100%; 
display:inline; 
font-weight:700; 
height:auto; 
border-bottom:1px solid #000; 
padding:2px; 
} 

.pin { 
padding:6px; 
} 

.fl10,.fl20,.fl30,.fl40,.fl50,.fl60,.fl70,.fl80,.fl90,.fl100 { 
padding-bottom:4px; 
color:#000; 
} 

.over { 
background-color:#EFEFDC; 
line-height:20px; 
} 

.half { 
line-height:50%; 
} 

.quarter { 
line-height:25%; 
} 

.lh10 { 
line-height:10%; 
} 

.checkmargin { 
margin-right:25px; 
} 

.checkmarginL { 
margin-left:25px; 
} 

.pusher { 
padding-left:15px; 
} 

.pusherR { 
margin-right:40px; 
} 

.rand3 { 
background-color:#FFF; 
line-height:3px; 
} 

.rand1 { 
background-color:#FFF; 
line-height:1px; 
} 

.whiteborder { 
color:#fff; 
border:4px solid #fff; 
margin:10px; 
padding:10px; 
} 

#details { 
width:580px; 
color:#fff; 
} 

.column1 { 
color:#000; 
width:500px; 
border:0; 
float:left; 
margin:0; 
padding:0; 
} 

.column2 { 
color:#000; 
border:0; 
width:80px; 
float:right; 
margin:0; 
padding:0; 
} 

.f200 { 
color:#000; 
} 

.f210 { 
color:#000; 
float:left; 
} 

.inp_sel { 
width:80%; 
} 

.form-bg { 
background:#eeefdf; 
width:1080px; 
overflow:hidden; 
} 

.data-bar { 
border-bottom:1px solid #fbfbf7; 
display:inline-block; 
padding:10px; 
} 

.left { 
float:left; 
width:200px; 
} 

.right { 
float:right; 
width:700px; 
} 

.data-box { 
width:650px; 
height:100px; 
border:1px solid #cbcbcb; 
} 

#table td { 
margin:120px; 
} 

.personName { 
float:left; 
width:300px; 
} 

.otherDetails { 
float:right; 
width:300px; 
} 

.readonly,.TB_nbA { 
background-color:#CCC; 
} 

a:link,a:visited,a:hover,a:active { 
color:#000; 
text-decoration:none; 
} 

.fontS75,.small { 
font-size:75%; 
} 

h3,h5 { 
font-size:80%; 
display:inline; 
font-family:"Arial Unicode MS", Arial, Helvetica, sans-serif; 
} 

.TB_bo,.b2 { 
border:2px solid #efefdc; 
}

나는이 같은 페이지에 다른 장소를하는 것처럼 이미지를 렌더링 할

<div class="fl20">Depositionsdatum:</div> 
<div class="fl40"><input type="text" size="10" name="depositionsdatum" 
     id="depositionsdatum" value="">&nbsp;<a href="#"><img src="images/cal.gif" width="16" 
     height="15" alt="" onclick="javascript:openCalWin('620','300','depositionsdatum')"></a></div>

입니다 HTML이된다 : enter image description here 여기가 더 블루 프레임이없고 코드가 거의 동일 :

<div id="datum" class="fl20">Datum ingivningsdag:</div> 
     <div class="fl20"><input type="text" name="ingivningsdag" 
    id="ingivningsdag" value="2012-04-11">&nbsp;<a href="#"><img src="images/cal.gif" alt="" width="16" height="15" border="0" onclick="javascript:openCalWin('620','300','ingivningsdag')"></a></div>

는 왜 한 곳에서 작동 않으며, 다른하지?

출처

2012-04-17 Niklas Rosencrantz

크롬의 개발자 도구 (아마 다른 사람뿐만 아니라)을 도움 말이죠 경우 사용할 수는 요소에 테두리가 있음을 보여 즉시 것 (단어의 CSS 의미에서) 그 국경에 대한 가치가 어디서 왔는지 말해줍니다. 그것들을 시험해보십시오. – Jon

코드가 동일하지 않습니다. 'border = 0' 누락되었습니다 – buymypies

질문하기 전에 두 코드를 모두 대조해야합니다. 대답은 앞에 있습니다.) 제 코드

에는 테두리 = "0"

및 제 코드

가 경계 = "0"

적용이 CSS

a img 
    { 
     border: 0; 
     outline:0;(for removing dotted borders from image and links.You gonna need this in future) 
    }

또는 적용 테두리가 없다 = 첫 번째 코드에서는 "0"입니다.

출처

2012-04-17 08:12:47 Jack

감사합니다. 이제 훨씬 나아 보인다. –

나는 접근성상의 이유 때문에 outline : 0을 추가하지 않을 것이다. 요소를 집중시킬 때 외곽선을 제거합니다. –

@NickRosencrantz이 스레드를 닫을 수 있도록 대답을 선택할 수 있습니다. – Jack

코드가 동일하지 않습니다.

두 번째 인스턴스는 border="0"입니다. IMG 요소의 속성으로 설정하거나 (기본 설정) CSS 선택기를 사용하여 border:none으로 설정해야합니다.

출처

2012-04-17 08:07:38

단순히 때문에 같은 HTML에 하나, 이미지에 border=0을 설정

<img src="images/cal.gif" width="16" height="15" alt="" border="0" onclick="javascript:openCalWin('620','300','depositionsdatum')"></a>`

또는 CSS :

a img 
{ 
    border: 0; 
}

출처

2012-04-17 08:07:41 Jake

이 그것을 할 것입니다 :

a img { 
    border: none; 
}

출처

2012-04-17 08:08:43

당신은이 이미지가 앵커에 싸여 있기 때문에 테두리가있는 링크입니다.

a img { border:none; }

출처

2012-04-17 08:09:26

그리고 왜 어쨌든 앵커를 타겟팅합니까? –

@JannisM 질문에서 HTML을 발견하지 못했다고 생각합니다. img는 앵커 태그를 감싸므로 앵커를 사용했습니다. –

동의하지만 국경 : 0 ~ 태그는 항상 있어야합니다 –

<img />의 기본 경계는 1px입니다. 스타일 시트에 border: 0;을 설정하거나 <img /> 태그 안에 border="0" 인라인을 사용하십시오.

출처

2012-04-17 08:10:46

사용이 css- 또한

a img {border:none;outline:0;}

당신이

a:hover, a:active, a:focus {outline:0;}

출처

2012-04-17 11:56:22

이미지 주위에 파란색 프레임을 표시하지 않는 방법은 무엇입니까?

답변

관련 문제