1

내 라이브 사이트 http://mozzor.com을보고 맨 위에있는 원 아이콘 위로 마우스를 이동하십시오. (나는 FF23을 사용하고 있습니다) 단지 파이어 폭스에서 발생하는 두 가지 효과에 주목 :부트 스트랩 3의 툴팁이 Firefox에서 원치 않는 CSS 효과를 보임

1) 툴팁

2의 텍스트에 추가 파란색 밑줄이)를 텍스트는 잠시 후 후, 유혹에 렌더링 , 그 자체가 흐리게 보인다.

Firebug로 디버깅하는 데 문제가 있습니다 ...이 두 가지 효과 중 하나에 해당하는 CSS 요소를 찾을 수 없습니다.

// Variable currentSelect corresponds to hex color value 
// selected in the jQuery widget seen at the top left side of the page 
$('#notebookIcon,#pencilIcon,#headphoneIcon').tooltip().on("mouseover", function() { 
    var tooltip = $(this).next(".tooltip"); 
    //Box 
    tooltip.find(".tooltip-inner").css({ 
     backgroundColor: "#fff", 
     color: currentSelect, 
     borderColor: currentSelect, 
     borderWidth: "1px", 
     borderStyle: "solid" 
    }); 
    //Arrow 
    tooltip.find(".tooltip-arrow").css({ 
     //borderTopColor: currentSelect, 
     //borderLeftColor: currentSelect, 
     //borderRightColor: currentSelect, 
     borderBottomColor: currentSelect 
    }); 
}); 

편집 :

그냥 경우에, 여기에 내가 툴팁 스타일을 방법에 대한 몇 가지 관련 코드는 두 번째 문제는 글꼴 파이어 폭스에서 천천히 앨리어싱 처리하는 것 같다. 여러 다른 글꼴을 시도한 후에도 문제가 지속됩니다. 자세한 내용은 아래를 참조하십시오 :

Github의 문제 : https://github.com/twbs/bootstrap/issues/10218

질라 문제 : https://bugzilla.mozilla.org/show_bug.cgi?id=909814

답변

1

첫 번째 문제는 CSS text-decoration 속성에 의해 결정됩니다 밑줄,입니다. Firefox에서 왜 그런 일이 발생하는지 정확히 알지 못합니다 (Chrome에서 올바른 것으로 보이는 이유는 메뉴 항목의 텍스트 장식이 none으로 설정 되었기 때문입니다). 빠른 수정이 있지만 원인을 찾을 수 있는지 알 수 있습니다.

#iconrow a { 
    text-decoration: none; 
} 

두 번째 질문에 대해 : 나는 당신이 CSS로 이것을 할 수 없다는 것을 이해하지 못합니다.

+0

CSS (또는 다른 수단)를 사용하여 효과를 멈추려고하는데, 어떻게 멈추는 지 모르겠다. – JLewkovich

+0

게시 한 이후 페이지에서 아무 것도 변경하지 않습니까? 더 이상 블루싱 효과가 보이지 않습니다. 생각해 보면 텍스트 그림자 일 수 있습니다. 그걸 수정했는지 확인하기 위해'* {text-shadow : none}'을 시도해보고 작동하면 그것을 좁힐 수 있습니다. – FakeRainBrigand

+0

당신의 밑줄에 대한 해결책은 잘되었지만 여전히 흐림 효과를 얻고'* {text-shadow : none} '이 수정되지 않았습니다. 그것은 부트 스트랩이나 파이어 폭스 중 하나에 문제가 있는지 궁금하네요 ... – JLewkovich

관련 문제