html - CSS border getting clipped on retina display -


clipped borderdepending 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

Popular posts from this blog

database - VFP Grid + SQL server 2008 - grid not showing correctly -

jquery - Set jPicker field to empty value -

.htaccess - htaccess convert request to clean url and add slash at the end of the url -