내 라이브 사이트 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
CSS (또는 다른 수단)를 사용하여 효과를 멈추려고하는데, 어떻게 멈추는 지 모르겠다. – JLewkovich
게시 한 이후 페이지에서 아무 것도 변경하지 않습니까? 더 이상 블루싱 효과가 보이지 않습니다. 생각해 보면 텍스트 그림자 일 수 있습니다. 그걸 수정했는지 확인하기 위해'* {text-shadow : none}'을 시도해보고 작동하면 그것을 좁힐 수 있습니다. – FakeRainBrigand
당신의 밑줄에 대한 해결책은 잘되었지만 여전히 흐림 효과를 얻고'* {text-shadow : none} '이 수정되지 않았습니다. 그것은 부트 스트랩이나 파이어 폭스 중 하나에 문제가 있는지 궁금하네요 ... – JLewkovich