iPhoneX safari: border set 0.5px with center align, it appears incompleteCSS - Excess space on the rightCenter image using text-align center?GridView Lines Not Showing up in IEResponsive image align center bootstrap 3Bootstrap one-page layout viewport width unitsSafari 9 (in iOS9) ignores CSS settingsCSS position:fixed is working for the header but not for the footerTextarea too large for page?Invalid css style during zooming in calendarCenter aligning a single letter inside a div
How hard is it to sell a home which is currently mortgaged?
Most importants new papers in computational complexity
How was film developed in the late 1920s?
The difference between Rad1 and Rfd1
3D nonogram, beginner's edition
How fast can a ship with rotating habitats be accelerated?
I hit a pipe with a mower and now it won't turn
How exactly is a normal force exerted, at the molecular level?
How do researchers used to find articles before the Internet and the computer era?
What exactly is a fey/fiend/celestial spirit?
Why was Mal so quick to drop Bester in favour of Kaylee?
Spicket or spigot?
Most elegant way to write a one shot IF
Java Optional working of orElse is not as if else
Did Wakanda officially get the stuff out of Bucky's head?
Can you sign using a digital signature itself?
Generate and graph the Recamán Sequence
Loss of majority in Westminster
How can I convince my reader that I will not use a certain trope?
Plotting the gradient descent
Why do I need two parameters in an HTTP parameter pollution attack?
Can I travel from Germany to England alone as an unaccompanied minor?
How to expand abbrevs without hitting another extra key?
Can 'leave' mean 'forget'?
iPhoneX safari: border set 0.5px with center align, it appears incomplete
CSS - Excess space on the rightCenter image using text-align center?GridView Lines Not Showing up in IEResponsive image align center bootstrap 3Bootstrap one-page layout viewport width unitsSafari 9 (in iOS9) ignores CSS settingsCSS position:fixed is working for the header but not for the footerTextarea too large for page?Invalid css style during zooming in calendarCenter aligning a single letter inside a div
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
The labels' border were set to 0.5px;
Under Safari, it shows up uncomplete. some with the left border disappear, some right border.
After testing, I find some regulation, only text in Chineese has no border.
Is it a bug of safari on iPhoneX ,and How can I fixed it? Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover" name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body
font-family: PingFangSC-Regular;
.normal-label
margin: 0 52px;
text-align: center;
.label-item
display: inline-block;
word-break: keep-all;
box-sizing: border-box;
padding: 0 20px;
border: 0.5px solid #ddd;
border-radius: 2px;
height: 56px;
text-align: center;
line-height: 56px;
margin-bottom: 16px;
margin-right: 16px;
background: #fff;
font-size: 24px;
color: #999999;
.label-item-first-active
background: rgba(137,159,188,0.2);
border-color: #899FBC;
color: #899FBC;
box-sizing: border-box;
</style>
</head>
<body>
<div class="normal-label">
<div class="label-item">NoZhcn</div>
<div class="label-item label-item-first-active">笃行</div>
<div class="label-item label-item-first-active">笃行</div>
<div class="label-item label-item-first-active">笃行</div>
<div class="label-item">笃行之</div>
<div class="label-item">笃行之</div>
<div class="label-item">Hello</div>
<div class="label-item">笃行天下</div>
<div class="label-item">笃行天下</div>
<div class="label-item">笃行天下</div>
<div class="label-item">World</div>
<div class="label-item label-item-first-active">a笃行a</div>
</div>
</body>
</html>Snapshot under iPhoneX:
css iphone safari
add a comment |
The labels' border were set to 0.5px;
Under Safari, it shows up uncomplete. some with the left border disappear, some right border.
After testing, I find some regulation, only text in Chineese has no border.
Is it a bug of safari on iPhoneX ,and How can I fixed it? Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover" name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body
font-family: PingFangSC-Regular;
.normal-label
margin: 0 52px;
text-align: center;
.label-item
display: inline-block;
word-break: keep-all;
box-sizing: border-box;
padding: 0 20px;
border: 0.5px solid #ddd;
border-radius: 2px;
height: 56px;
text-align: center;
line-height: 56px;
margin-bottom: 16px;
margin-right: 16px;
background: #fff;
font-size: 24px;
color: #999999;
.label-item-first-active
background: rgba(137,159,188,0.2);
border-color: #899FBC;
color: #899FBC;
box-sizing: border-box;
</style>
</head>
<body>
<div class="normal-label">
<div class="label-item">NoZhcn</div>
<div class="label-item label-item-first-active">笃行</div>
<div class="label-item label-item-first-active">笃行</div>
<div class="label-item label-item-first-active">笃行</div>
<div class="label-item">笃行之</div>
<div class="label-item">笃行之</div>
<div class="label-item">Hello</div>
<div class="label-item">笃行天下</div>
<div class="label-item">笃行天下</div>
<div class="label-item">笃行天下</div>
<div class="label-item">World</div>
<div class="label-item label-item-first-active">a笃行a</div>
</div>
</body>
</html>Snapshot under iPhoneX:
css iphone safari
add a comment |
The labels' border were set to 0.5px;
Under Safari, it shows up uncomplete. some with the left border disappear, some right border.
After testing, I find some regulation, only text in Chineese has no border.
Is it a bug of safari on iPhoneX ,and How can I fixed it? Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover" name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body
font-family: PingFangSC-Regular;
.normal-label
margin: 0 52px;
text-align: center;
.label-item
display: inline-block;
word-break: keep-all;
box-sizing: border-box;
padding: 0 20px;
border: 0.5px solid #ddd;
border-radius: 2px;
height: 56px;
text-align: center;
line-height: 56px;
margin-bottom: 16px;
margin-right: 16px;
background: #fff;
font-size: 24px;
color: #999999;
.label-item-first-active
background: rgba(137,159,188,0.2);
border-color: #899FBC;
color: #899FBC;
box-sizing: border-box;
</style>
</head>
<body>
<div class="normal-label">
<div class="label-item">NoZhcn</div>
<div class="label-item label-item-first-active">笃行</div>
<div class="label-item label-item-first-active">笃行</div>
<div class="label-item label-item-first-active">笃行</div>
<div class="label-item">笃行之</div>
<div class="label-item">笃行之</div>
<div class="label-item">Hello</div>
<div class="label-item">笃行天下</div>
<div class="label-item">笃行天下</div>
<div class="label-item">笃行天下</div>
<div class="label-item">World</div>
<div class="label-item label-item-first-active">a笃行a</div>
</div>
</body>
</html>Snapshot under iPhoneX:
css iphone safari
The labels' border were set to 0.5px;
Under Safari, it shows up uncomplete. some with the left border disappear, some right border.
After testing, I find some regulation, only text in Chineese has no border.
Is it a bug of safari on iPhoneX ,and How can I fixed it? Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover" name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body
font-family: PingFangSC-Regular;
.normal-label
margin: 0 52px;
text-align: center;
.label-item
display: inline-block;
word-break: keep-all;
box-sizing: border-box;
padding: 0 20px;
border: 0.5px solid #ddd;
border-radius: 2px;
height: 56px;
text-align: center;
line-height: 56px;
margin-bottom: 16px;
margin-right: 16px;
background: #fff;
font-size: 24px;
color: #999999;
.label-item-first-active
background: rgba(137,159,188,0.2);
border-color: #899FBC;
color: #899FBC;
box-sizing: border-box;
</style>
</head>
<body>
<div class="normal-label">
<div class="label-item">NoZhcn</div>
<div class="label-item label-item-first-active">笃行</div>
<div class="label-item label-item-first-active">笃行</div>
<div class="label-item label-item-first-active">笃行</div>
<div class="label-item">笃行之</div>
<div class="label-item">笃行之</div>
<div class="label-item">Hello</div>
<div class="label-item">笃行天下</div>
<div class="label-item">笃行天下</div>
<div class="label-item">笃行天下</div>
<div class="label-item">World</div>
<div class="label-item label-item-first-active">a笃行a</div>
</div>
</body>
</html>Snapshot under iPhoneX:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover" name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body
font-family: PingFangSC-Regular;
.normal-label
margin: 0 52px;
text-align: center;
.label-item
display: inline-block;
word-break: keep-all;
box-sizing: border-box;
padding: 0 20px;
border: 0.5px solid #ddd;
border-radius: 2px;
height: 56px;
text-align: center;
line-height: 56px;
margin-bottom: 16px;
margin-right: 16px;
background: #fff;
font-size: 24px;
color: #999999;
.label-item-first-active
background: rgba(137,159,188,0.2);
border-color: #899FBC;
color: #899FBC;
box-sizing: border-box;
</style>
</head>
<body>
<div class="normal-label">
<div class="label-item">NoZhcn</div>
<div class="label-item label-item-first-active">笃行</div>
<div class="label-item label-item-first-active">笃行</div>
<div class="label-item label-item-first-active">笃行</div>
<div class="label-item">笃行之</div>
<div class="label-item">笃行之</div>
<div class="label-item">Hello</div>
<div class="label-item">笃行天下</div>
<div class="label-item">笃行天下</div>
<div class="label-item">笃行天下</div>
<div class="label-item">World</div>
<div class="label-item label-item-first-active">a笃行a</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover" name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body
font-family: PingFangSC-Regular;
.normal-label
margin: 0 52px;
text-align: center;
.label-item
display: inline-block;
word-break: keep-all;
box-sizing: border-box;
padding: 0 20px;
border: 0.5px solid #ddd;
border-radius: 2px;
height: 56px;
text-align: center;
line-height: 56px;
margin-bottom: 16px;
margin-right: 16px;
background: #fff;
font-size: 24px;
color: #999999;
.label-item-first-active
background: rgba(137,159,188,0.2);
border-color: #899FBC;
color: #899FBC;
box-sizing: border-box;
</style>
</head>
<body>
<div class="normal-label">
<div class="label-item">NoZhcn</div>
<div class="label-item label-item-first-active">笃行</div>
<div class="label-item label-item-first-active">笃行</div>
<div class="label-item label-item-first-active">笃行</div>
<div class="label-item">笃行之</div>
<div class="label-item">笃行之</div>
<div class="label-item">Hello</div>
<div class="label-item">笃行天下</div>
<div class="label-item">笃行天下</div>
<div class="label-item">笃行天下</div>
<div class="label-item">World</div>
<div class="label-item label-item-first-active">a笃行a</div>
</div>
</body>
</html>css iphone safari
css iphone safari
edited Mar 27 at 3:22
duXing
asked Mar 25 at 12:30
duXingduXing
1,0961 gold badge8 silver badges17 bronze badges
1,0961 gold badge8 silver badges17 bronze badges
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55337836%2fiphonex-safari-border-set-0-5px-with-center-align-it-appears-incomplete%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Is this question similar to what you get asked at work? Learn more about asking and sharing private information with your coworkers using Stack Overflow for Teams.
Is this question similar to what you get asked at work? Learn more about asking and sharing private information with your coworkers using Stack Overflow for Teams.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55337836%2fiphonex-safari-border-set-0-5px-with-center-align-it-appears-incomplete%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown