0
我在這裏有一個比較令人沮喪的情況，那就是我的字體「歷史地圖」使用flexbox在鉻標題框中居中，但根本沒有在Safari瀏覽器中。請參閱：http://www.historymaps2.drcrittall.com/welcome.phpFlexbox在瀏覽器上的工作方式與Chrome相比
下面是HTML和CSS：
/* Parent elements */
html,body {
\t height:100%;
}
/* Sets the container-fluid, row and column classes to 100% of the html and body elements */
.container-fluid,.row, .col-md-6, .col-xs-10 {
\t height:100%;
}
#titleframe {
\t position:relative;
\t display:-webkit-box;
\t display:-ms-flexbox;
\t display:flex;/* Flex-box ensures font is centered both vertically and horizontally within the title frame using align-items and justify-content. See http://stackoverflow.com/questions/5703552/css-center-text-horizontal-and-vertical-inside-a-div-block */
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
max-width:100%; /* max-width ensures background does not stretch outside container div */
height:15%; /* Represents height relative to parent elements - in this case .container-fluid,.row, .col-md-6, .col-xs-10 which are all set to 100% */
border-style:solid;
border-width:2px;
border-color:black;
background: url("../img/pages/frame4.3.jpg");
background-size: 100% 100%; /* Sets background image to fill 100% of container in both x and y directions. See: http://stackoverflow.com/questions/15160764/background-image-stretch-y-axis-only-keep-repeat-x */
background-repeat:no-repeat;
}
#titlepaper {
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
width:100%;
height:100%;
border-style:solid;
border-width:2px;
border-color:black;
/*padding:12px 25px;*/
padding: 2% 5.5% 2% 5%;
}
#maintitle {
position:absolute;
font-family:"Roboto Condensed", sans-serif;
font-style:italic;
font-weight: 700;
color: black;
text-shadow: 0px 3px 0px #b2a98f,
0px 14px 10px rgba(0,0,0,0.15),
0px 24px 2px rgba(0,0,0,0.1),
0px 34px 30px rgba(0,0,0,0.1);
word-wrap:break-word;
font-size:50px;
width:500px;
text-align: center;
flex:1;
\t
}
/* All media break-points: https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints */
@media only screen and (max-device-width : 480px) {
\t
\t
\t
\t /* Styles */
\t #maintitle {
\t
\t \t font-size:30px;
\t \t
\t \t width:200px;
\t \t
\t
\t }
\t
}<!DOCTYPE html>
<html lang = "en">
<head>
\t
<!-- http://getbootstrap.com/ -->
<link href="/css/bootstrap.min.css" rel="stylesheet"/>
\t \t
\t \t <meta charset = "utf-8">
\t \t
\t \t <meta name="viewport" content = "width=device-width, initial-scale = 1">
\t \t
<link href="/css/welcome.css?parameter=2" rel="stylesheet"/>
<title>History Maps</title>
<!-- https://jquery.com/ -->
<script src="/js/jquery-1.11.3.min.js"></script>
<!-- http://getbootstrap.com/ -->
<script src="/js/bootstrap.min.js"></script>
</head>
<body>
\t <div class = "container-fluid" style = "border:solid;">
\t \t
\t \t <div class = "row" style = "margin-top:5%">
\t \t \t <div class = "col-md-offset-3 col-md-6 col-xs-offset-1 col-xs-10" >
\t \t \t \t <!--
\t \t \t \t <img id = "titleframe" src="../img/pages/frame4.3.jpg" class="img-fluid" alt="Responsive image" style = "height:auto; max-width:100%;">
\t \t \t \t
\t \t \t \t <img id ="titlepaper" src="img/pages/paper.jpg" class="img-fluid">-->
\t \t \t \t <div id = "titleframe">
\t \t \t \t \t <img id ="titlepaper" class = "img-fluid" src="img/pages/paper.jpg">
\t \t \t \t \t <font id="maintitle">History Maps</font> \t \t \t \t
\t \t \t \t </div>
\t \t \t \t <!--<div class = "container-fluid" id = "test"></div>-->
\t \t \t \t \t \t \t \t
\t \t \t </div>
\t \t
\t \t </div>
\t \t
\t </div>
</body>
</html>如果任何人都可以看到爲什麼字體定心行爲差異如此之於Chrome瀏覽器Safari瀏覽器，我將非常感謝知道爲什麼。
此致
是，改變#maintitle到的位置是：相對做的工作。爲什麼這解決了這個問題？ – Mathias
因爲titlepaper也是絕對的，所以你在嵌套在relative（titleframe）內的2個absolutes（titlepaper和maintitle）之間發生了衝突，考慮到圖像超過了它的相對父寬度，它也將文本推出，所以設置relative relative保持與其父寬度的關係，避免被其他絕對之前（titlepaper）推動。 – Syden