CSS Windows兼容性

此頁面的徽標窗口顯示出它的地方：CSS Windows兼容性

但標記是非常簡單的。 這是什麼與Windows不兼容？

這裏是一個的Windows7 + Chrome49測試抓屏（是在較新的Windows OS相同）：

HTML：

<div class="site-branding hidden-xs"> 
    <div class="s s-weblog"></div> 
    <a class="site-title" href="<?= esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a> 
    <p class="site-description"> 
    <?php bloginfo('description'); ?> 
    </p> 
</div>

SCSS：

.site-branding { 
    text-align: center; 
    .s-weblog { 
    font-size: 128px; 
    height: 135px; 
    } 
    .site-title { 
    font-size: 28px; 
    padding: 0; 
    } 
    .site-description { 
    margin-bottom: 30px; 
    font-style: italic; 
    } 
}

請提前告訴你！

來源

2016-03-30 aitor

這個問題似乎與字體本身有關。有一個在這裏Fix custom font line-height with CSS

讀一個簡單的解決將是使用相對/絕對定位

來源

2016-03-30 08:38:17 omarCreativeDev

非常感謝。我試着用絕對定位來解決這個問題。這意味着其他元素應該有絕對的位置。做完之後，徽標仍然在Windows的位置！ – aitor

我想這是與

font-family:contraindi;

我試圖改變 content:"some text"和刪除 font-family和我有這樣的事情

來源

2016-03-30 08:39:00 lomboboo

是的，我已經從SVG生成了這種字體，並帶有https://github.com/nfroidure/gulp-iconfont。我很可能犯了錯誤。這些工具的文檔非常差。 – aitor

請試試這個：

.s:before { 
    display: inline-block; 
    font-family: contraindi; 
    font-style: normal; 
    font-weight: 400; 
    line-height: 1; 
    position: absolute; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    top: -134px; 
    left: 71px; 
}

來源

2016-03-30 08:42:02 satya

我做到了，沒有結果。我還嘗試了一些其他的設置，以便在pseudoclase之前。當我從SVG創建字體時，很可能我做了一些錯誤。 – aitor

CSS Windows兼容性

回答

相關問題