>

현재 문제를 해결하기 위해 뇌를 감싸려고 노력하고 있지만 그것을 파악할 수없는 것 같습니다.

탐색을위한 순서가없는 목록에서 의사 클래스 전에 CSS를 통해 모든 목록 항목 앞에 아이콘을 추가하고 싶습니다.

<ul class="list">
    <li class="list-item"><a href="#">one</a></li>
    <li class="list-item"><a href="#">two</a></li>
    <li class="list-item"><a href="#">three</a></li>
    <li class="list-item"><a href="#">four</a></li>
</ul>​

첫 번째 생각은 두 요소 (아이콘과 a- 태그)를 인라인 블록으로 표시하고 아이콘을 세로 정렬 : 중간으로 정렬하는 것이었다. 약간만 조정하면 (여백-마지막) 크롬에서 잘 작동합니다.

.list-item {
    display: block;
    font-weight: bold;
    text-transform: uppercase;
    margin: 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #F3F3F3;
    height:1.5em;
    overflow:hidden;
}
.list-item:before {
    display: inline-block;
    content: '';
    vertical-align: middle;
    background-color: red;
    width: 5px;
    height: 7px;
    margin: 0 4px 0.125em 5px;
}
.list-item a {
    display: inline-block;
    overflow: hidden;
    line-height: 1.5;
    height:1.5em;
}

하지만 파이어 폭스에 페이지를로드하면 아이콘이 맨 아래에서 꺼집니다. http://jsfiddle.net/pUhPB/4/

디스플레이, 수직 정렬 및 여백 값의 모든 가능한 조합을 두 브라우저 모두에서 올바르게 표시하고 마지막으로 a-tag vertical-align : middle 및 icon vertical- align : baseline, 그것은 작동하는 것 같습니다 :

.list-item {
    display: block;
    font-weight: bold;
    text-transform: uppercase;
    margin: 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #F3F3F3;
    height:1.5em;
    overflow:hidden;
}
.list-item:before {
    display: inline-block;
    content: '';
    vertical-align: baseline;
    background-color: red;
    width: 5px;
    height: 7px;
    margin: 0 4px 0 5px;
}
.list-item a {
    display: inline-block;
    vertical-align:middle;
    overflow: hidden;
    line-height: 1.5;
    height:1.5em;
}

http://jsfiddle.net/L3N3f/

그러나 나는 그것을 얻지 못한다. 첫 번째 버전이 작동하지 않는 이유는 무엇입니까? 나에게 실제로 작동하는 버전보다 훨씬 논리적으로 보입니다. 그리고 두 브라우저 중 어느 것이 요소를 올바르게 렌더링하지 않습니까?

이미 나에게 효과가있는 솔루션을 찾았으므로 매우 긴급한 질문은 아니지만 내 문제의 핵심 (및 솔루션)을 이해하지 못한다는 사실에 버그가있어서 정말 감사 할 것입니다. 누군가가 나를 깨우칠 수 있다면.

감사합니다

  • 답변 # 1

    웹 표준에 따르면 크롬과 같은 일부 브라우저가 여전히 정렬하더라도 인라인 요소 만 "수직으로 정렬"할 수 있습니다. 내용이 아니라 정렬 된 요소입니다. 당신이 그것을 <span> 에 적용하면   <span>  내부 텍스트가 아닌 주변 텍스트와 정렬됩니다.

    ispo lorem <span> text </span> due carpe diem
    
    

    span {vertical-align:top; border: 1px solid black} 추가   <span> text </span> 를 만든다  (전체 상자) 나머지 텍스트보다 높아지고 text 를 누르지 마십시오.  상자 <span> 의 천장에 .

    여기서 핵심 문제는 웹 표준과 관련하여 Firefox가 문자 그대로 사용되는 반면 Chrome은 이와 같은 몇 가지 암시 적 기능을 추가한다는 것입니다.

    자세한 내용은 여기를 클릭하십시오.

    편집 : 분명히 vertical-align:top 를 사용하면  오직 <a> 에서만  그것은 또한 작동합니다.

  • 답변 # 2

    문제는 사양 설정 overflow:hidden 입니다  인라인 블록의 기준선 위치를 변경합니다. 파이어 폭스는 스펙이 말한 것을 구현한다. 크롬은 그렇지 않습니다.

    당신의 .list-item a 만큼

     기준선으로 정렬되어 있으며 두 브라우저에서 다르게 렌더링됩니다. 렌더링을 동일하게 만드는 유일한 방법은 인라인 블록을 보이지 않는 오버플로로 기준선 정렬하지 않는 것입니다. 이는 두 번째 코드 붙여 넣기가 수행하는 것입니다 ( vertical-align: middle 사용)  

    on

    이것을 시도해보십시오 : http://jsfiddle.net/pUhPB/6/

    이 상황에서 가장 먼저하는 일은 두 브라우저에서 코드를 여는 것입니다. 그런 다음 문제가 나타날 때까지 CSS 코드 제거를 시작합니다. 여백과 수직 정렬을 제거하면 두 브라우저에서 코드가 다르게 렌더링됩니다. 따라서 코드가 모두 동일해질 때까지 코드를 계속 제거합니다. 두 브라우저에서 모두 동일 해지면 원하는 효과를 얻을 수 있도록 변경했습니다.

    새로운 CSS는 다음과 같습니다 :

    .list-item:before 
    {
        content: '';
        background-color: red;
        width: 5px;
        height: 7px;
        margin: 5px 4px 0 5px;
        float:left;
    }
    
    

  • 이전 keyboard - Windows 7 Map CTRL + j를 아래쪽 화살표 키로
  • 다음 비 npm 라이브러리에서 browserify를 사용하는 방법은 무엇입니까?