html - CSS border getting clipped on retina display -
depending on width of browser window border of elements deposit button clipped. when resize width of browser, if move pixel pixel border clipped , unclipped each pixel move, maybe has even/odd pixels on retina display since there 2 real pixels per css pixel? have 15" retina macbook pro @ 1680x1050.
here's scss button:
.make-deposit { background-color: transparent; border: 1px solid $green; color: $green; padding: 6px 14px; margin-right: 5px; font-size: 12px; position: relative; top: -3px; &:hover { background-color: $green; color: $white; } }
just try add box-sizing: border-box; css rule...
try new code:
.make-deposit { background-color: transparent; border: 1px solid $green; box-sizing: border-box; color: $green; padding: 6px 14px; margin-right: 5px; font-size: 12px; position: relative; top: -3px; } .make-deposit:hover { background-color: $green; color: $white; }
Comments
Post a Comment