내부 내용이 아닌 웹킷 브라우저에서 블록이

나는 목록 번호를 다음 CSS를 사용하여 내 블로그에 디자인이있을 때 레이아웃 문제를 일으키는 목록 스타일을 번호 : 각 <li> 요소는 내부내부 내용이 아닌 웹킷 브라우저에서 블록이

list-style: decimal inside none;

을 블록으로 표시되는 앵커 태그. WebKit 브라우저에서는 정상적으로 작동합니다. FireFox, IE 및 Opera에서 내부 블록 앵커의 표시는 목록 스타일의 너비만큼 아래로 밀려납니다. 패딩, 여백 및 텍스트 들여 쓰기로 고치려고했지만 행운이 없습니다. 선택한 요소에 대해 LI의 왼쪽 테두리 색을 변경하려고하기 때문에 외부에서 스타일을 지정할 수 없습니다. 앵커 태그를 절대 위치에 배치하고 올바르게 배치 할 수는 있지만 여기서는 간단한 누락이 있다고 생각합니다.

WebKit이 아닌 브라우저에서 작동하도록 CSS를 수정하는 솔루션을 가지고있는 사람이 있습니까? http://mattsnider.com/styleguide/html/

모든 CSS는 LI에 적용 :

.menu .menu-item:first-child { 
    border-top: 0 none; 
} 
.menu-numbered .menu-item { 
    list-style: decimal inside none; 
} 
.menu-item { 
    border-bottom: 1px solid #EEEEEE; 
    border-top: 1px solid #FFFFFF; 
}

앵커에 적용된 모든 CSS :

.menu-item.selected a { 
    border-left-color: black; 
} 
.menu-item a { 
    border-left: 2px solid #FAFAFB; 
    display: block; 
    margin-top: -1em; 
    padding: 8px 10px 8px 8px; 
    text-shadow: 0 1px 0 #FFFFFF; 
} 
.l_aside a { 
    color: #3D49FF; 
} 
a { 
    opacity: 0.9; 
}

출처

2013-05-02 matt snider

WebKit은 사양에 따라 잘못하고있는 것 같습니다. 목록에 적용한 전체 CSS 규칙과 마크 업을 나열 할 수 있습니까? – BoltClock

다른 브라우저에서 WebKit처럼 동작하도록 CSS를 알고 있습니까? –

가있어 여기에

은 오른쪽에있는 메뉴를 참조 사이트입니다 13 살의 벌레 ... 좋은 발견! 주의 : https://developer.mozilla.org/en-US/docs/CSS/list-style-position 문서 : 여기에 옵션이 https://bugzilla.mozilla.org/show_bug.cgi?id=36854

.... 목록 요소에 선택한 경계를 교환하는 동안, display:inline-block와 바이올린 text-align와, 그리고 text-indent에 앵커를 설정할 수 있습니다. 열심히 전적으로 말하지만, 그 옵션은 파이어 폭스에서 나를 위해 일한다.

출처

2013-05-02 21:24:19 albert

내부 내용이 아닌 웹킷 브라우저에서 블록이

답변

관련 문제