Uneven border in mobile browsers

2019-07-24 16:24发布

问题:

I'm developing a responsive website and has many elements with 1px border. In mobile devices (with high dpi) borders seems uneven and blurry. I know this is because of the high DPI of the screens. Any solutions?

image http://i61.tinypic.com/1z89bs.jpg

Edit:

CSS
.search_bar{
    width:40%;
    height:28px;
    font-size:13px;
    outline:none;
    border:0px;
    padding:0px;
    float:left;
    background:#fff;
    line-height:12px;
    font-size:14px;
    text-indent:9px;
    letter-spacing: normal;
    text-align: start;
    text-rendering: optimizelegibility;
    text-shadow: none;
    text-transform: none;
    word-spacing: normal;
}

HTML
<input name="" class="search_bar" type="text" placeholder="Search">