문제

I custom styled the buttons of a Colorbox lightbox on this page (click the image to load).

There are gray buttons (two arrows and an X) that do not appear in Safari (7.0.1) but appear in Chrome and Firefox.

Using web inspector to change the background to a color has no effect either.

CSS of one button:

#cboxNext {
position: fixed;
top: 47%;
right: 18px;
width: 22px;
height: 32px;
background: url("buttons.png");
background-position: -42px 0;
background-repeat: no-repeat;
background-color:white;
}
  • The .png sprite file and stylesheet are in the same directory.
  • Updating to the latest Colorbox version didn't help (I reverted back to older version).
  • I read here that Safari in the past had issue with the background shortcut syntax, hence the long form.

Any help is much appreciated!

도움이 되었습니까?

해결책

Fixed.

The position:fixed buttons were child elements of a container that had overflow:hidden. Unlike other browsers, Safari seemed to hide the buttons inside their parent.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top