字母之間的間隔相等間隔

Question

我正在爲一個客戶端在網站上工作，他們需要每個頁面的標題，在頁面上有一個從左到右伸展的單詞，每個字符之間有一條黑線。

隨着@Paulie_D的幫助下，我成功地建立了柔性財產上使用此代碼本網站http://s-p-o-k.se/web/om-spok/：

<div id="header-text"> 
<span class="first"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/Oo.svg"></span> 
<span><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/M.svg"></span> 
</div> 

#header-text { 
width: 100%; 
display: flex; 
justify-content:; 
font-weight: 700; 
font-family: 'pduregular'; 
color: #000; 
max-width: 100%; 
height: 160px; 
} 

#header-text span { 
display: -webkit-box; 
display: -moz-box; 
display: -ms-flexbox; 
display: -webkit-flex; 
display: flex; 
flex: 1; 
align-items: center; 
} 

#header-text span::after { 
content: ' '; 
flex: 1; 
height: 15px; 
background: #000; 
} 

#header-text span:last-child { 
flex: 0; 
margin-left: 10px; 
} 

這在Firefox中運作良好，但在Safari中它不顯示最後一個孩子。我試圖環顧四周，但我找不到可能導致這種情況的原因。有人有想法嗎？

最好的問候，馬庫斯

Answer 1

它與鉻/ Safari瀏覽器不能正確處理圖像的柔性孩子的做（他們是收縮或擴張，收縮這裏爲零寬度）。

2個選項來避免這個

使用額外的容器，IMG是不是爲了避免不必要的WebKit行爲

使用較舊的方法就像一個漂浮Flexbox，就直接孩子。

---

老氣浮法:)周圍圖像

#header-text { 
 
    font-weight: 700; 
 
    font-family: 'pduregular'; 
 
    color: #000; 
 
    max-width: 100%; 
 
    height: 160px; 
 
} 
 
#header-text img { 
 
    height: 160px; 
 
} 
 
#header-text span { 
 
    float: right; 
 
    margin: 0 10px; 
 
} 
 
#header-text .first { 
 
    float: left; 
 
} 
 
#header-text::after { 
 
    content: ''; 
 
    display: block; 
 
    height: 90px; /* half height img (letter) + half height line */ 
 
    border-bottom: 20px solid; 
 
    box-sizing: border-box; /* so it is average middle from height calculation */ 
 
    overflow: hidden; /* mind the floatting span */ 
 
} 
 
/* let's see where it stands */ 
 

 
#header-text { 
 
    background: linear-gradient(to left, transparent 50%, rgba(0, 0, 0, 0.2) 50%), linear-gradient(to top, transparent 50%, rgba(0, 0, 0, 0.2) 50%) 
 
} 
 
::after { 
 
    opacity:0.5; 
 
    }

<div id="header-text"> 
 
    <span class="first"><img src="http://s-p-o-k.se/web/wp-content/themes/spok/images/Oo.svg"></span> 
 
    <span><img src="http://s-p-o-k.se/web/wp-content/themes/spok/images/M.svg"></span> 
 
</div>

---

額外包裝：我讓你自己嘗試一下;）好吧，我想我如果我希望某些飼料添加，也應該提供它CK，所以這裏是： :)

#header-text { 
 
    font-weight: 700; 
 
    font-family: 'pduregular'; 
 
    color: #000; 
 
    max-width: 100%; 
 
    height: 160px; 
 
    display:flex; 
 
} 
 
#header-text img { 
 
    height: 160px; 
 
    margin:0 10px; 
 
} 
 
#header-text .first ~ span { 
 
    display:flex; 
 
    flex:1; 
 
} 
 
#header-text .first ~ span:before { 
 
content:''; 
 
    flex:1; 
 
    border-bottom:20px solid; 
 
    margin:auto; 
 
} 
 
/* let's see where it stands */ 
 

 
#header-text { 
 
    background: linear-gradient(to left, transparent 50%, rgba(0, 0, 0, 0.2) 50%), linear-gradient(to top, transparent 50%, rgba(0, 0, 0, 0.2) 50%) 
 
} 
 
:before { 
 
    opacity:0.5; 
 
    }

<div id="header-text"> 
 
    <span class="first"> <span><img src="http://s-p-o-k.se/web/wp-content/themes/spok/images/Oo.svg"></span></span> 
 
    <span> <span><img src="http://s-p-o-k.se/web/wp-content/themes/spok/images/M.svg"></span></span> 
 
    <span> <span><img src="http://s-p-o-k.se/web/wp-content/themes/spok/images/Oo.svg"></span></span> 
 
    <span> <span><img src="http://s-p-o-k.se/web/wp-content/themes/spok/images/M.svg"></span></span> 
 
</div>