堆棧內存溢出
  簡體   English   中英

與Chrome相比，Flexbox在野生動物園上的工作方式有所不同

[英]Flexbox working differently on safari compared to chrome

 原文  2016-12-03 21:40:01  7   1    html/ css/ google-chrome/ safari

問題描述

我在這里遇到了一個相當令人沮喪的情況，其中我的字體“ History Maps”使用flexbox在chrome的標題框中居中，而在safari瀏覽器中卻根本沒有。 請參閱： http : //www.historymaps2.drcrittall.com/welcome.php

這是html和CSS： 

  /* Parent elements */ html,body { 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 { height:100%; } #titleframe { position:relative; display:-webkit-box; display:-ms-flexbox; 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; } /* 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) { /* Styles */ #maintitle { font-size:30px; width:200px; } } 
 <!DOCTYPE html> <html lang = "en"> <head> <!-- http://getbootstrap.com/ --> <link href="/css/bootstrap.min.css" rel="stylesheet"/> <meta charset = "utf-8"> <meta name="viewport" content = "width=device-width, initial-scale = 1"> <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> <div class = "container-fluid" style = "border:solid;"> <div class = "row" style = "margin-top:5%"> <div class = "col-md-offset-3 col-md-6 col-xs-offset-1 col-xs-10" > <!-- <img id = "titleframe" src="../img/pages/frame4.3.jpg" class="img-fluid" alt="Responsive image" style = "height:auto; max-width:100%;"> <img id ="titlepaper" src="img/pages/paper.jpg" class="img-fluid">--> <div id = "titleframe"> <img id ="titlepaper" class = "img-fluid" src="img/pages/paper.jpg"> <font id="maintitle">History Maps</font> </div> <!--<div class = "container-fluid" id = "test"></div>--> </div> </div> </div> </body> </html>

如果有人能理解為什么字體中心在Chrome和Safari上的表現如此不同，我將不勝感激。

親切的問候

1 個解決方案

解決方案1
 1 已采納  2016-12-03 21:44:41

嘗試刪除任何position: absolute; 從#maintitle或將其更改為relative 。 

 /* Parent elements */ html,body { 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 { height:100%; } #titleframe { position:relative; display:-webkit-box; display:-ms-flexbox; 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:relative; 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; } /* 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) { /* Styles */ #maintitle { font-size:30px; width:200px; } } 
 <div class = "container-fluid" style = "border:solid;"> <div class = "row" style = "margin-top:5%"> <div class = "col-md-offset-3 col-md-6 col-xs-offset-1 col-xs-10" > <!-- <img id = "titleframe" src="../img/pages/frame4.3.jpg" class="img-fluid" alt="Responsive image" style = "height:auto; max-width:100%;"> <img id ="titlepaper" src="img/pages/paper.jpg" class="img-fluid">--> <div id = "titleframe"> <img id ="titlepaper" class = "img-fluid" src="img/pages/paper.jpg"> <font id="maintitle">History Maps</font> </div> <!--<div class = "container-fluid" id = "test"></div>--> </div> </div> </div>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 與Safari瀏覽器相比，Chrome瀏覽器的呈現方式有所不同 在Flexbox中固定的位置在Chrome和Safari / Firefox之間的行為有所不同 Flexbox在Firefox上無法正常運行，但在Chrome和Safari上運行正常 Flexbox 和絕對定位在 Chrome 和 Safari 中不起作用 為什么我的 Flexbox 布局在 Safari 15 和 Chrome 中無法正常工作？ Flexbox CSS 不適用於 Safari Chrome和Safari在閱讀CSS方面有所不同？ Flexbox僅適用於Chrome Flexbox僅適用於Chrome Flexbox行換行在Safari中不起作用
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM