여기에 꽤 간단한 HTML과 CSS가 있고 크롬과 인터넷 익스플로러에서는 잘 작동하지만 파이어 폭스는 유아처럼 선 안에 그릴 수없는 것 같습니다.
다음은 HTML입니다.
<div class="Profile_Summary">
<div id="1984" class="Profile_Summary_Text">
<h4>Sherlock Holmes</h4><br/>
221B Baker St.<br/>
Private Detective<br/>" +
<span>Scotland Yard <a href=\"mailto:[email protected]\">[Email]</a></span>
</div>
</div>
여기 CSS가 있습니다
.Profile_Summary{
height:262px;
width:224px;
border:solid 1px;
float:left;
margin:15px 0px 15px 25px;
background-size:100%;
background-size:cover;
border-radius:5px;
}
.Profile_Summary_Text{
background-color: rgba(255, 255, 255, .65);
padding:0px 0px 0px 6px;/*top right bottom left*/
height:75px;/*100-9 to adjust for padding-top*/
width:218px;/*294px;/*300-6 to adjust for padding-left*/
margin-top:188px;/*250px;/*350 - height(as seen above)*/
font-size:15px;
text-decoration:none;
border-radius:5px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.Email{
float:right;
padding-right:4px;
}
문제는의 [이메일] 텍스트가 <a>바로 앞의 텍스트와 같은 줄에 나타나지 않는다는 것입니다. 예를 들어 다음과 같은 것이 있습니다.
Scotland Yard
[Email]
Firefox에서만 발생하며 Profile_Summary_Text가 오버플로를 숨기므로 <a>태그에 액세스 할 수 없습니다.
차이가 나는 경우를 대비하여 여러 Profile_Summary div를 페이지에 동적으로로드한다고 말할 것입니다. 나는 변화 시도 <span>에를 <div>하고 <p>있지만 어느 쪽을 고정합니다. 나는 또한 모두 0 %로 패딩과 마진을 설정 <span>하고 <a>. 나는 또한 다른 조합의 무리 해봤 display:inline및 display:inline-block을 위해 등을 <span>하고 <a>있지만, 아무 것도이 문제를 해결 것 같다.
최근에 Firefox에 문제가 발생한 것은 이번이 처음이 아니므로 렌더링 규칙을 엉망으로 만든 업데이트가 있었는지 조금 궁금합니다. 내 기본 질문은이 문제를 해결하려면 어떻게해야합니까?
HTML을 "로 변경하십시오.
<div class="Profile_Summary">
<div id="1984" class="Profile_Summary_Text">
<h4>Sherlock Holmes</h4><br/>
221B Baker St.<br/>
Private Detective<br/>" +
<span><a href=\"mailto:[email protected]\">[Email]</a>Scotland Yard </span>
</div>
</div>
즉, 이메일 앵커를 스팬 (해당 컨테이너)의 시작 부분으로 이동합니다.
Float 요소가 다른 요소 앞에 와야 내용이 뒤틀리게됩니다.하지만 float가 맞을 때 약간 직관적이지 않습니다.
편집 : 앵커 위치를 편집하고 텍스트를 잘못 복사했습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다