Safari将标题徽标与正文重叠

时间:2014-05-05 17:19:49

标签: css wordpress safari

我使用道主题http://themeforest.net/item/tao-retina-responsive-wordpress-portfolio-theme/5913809

我遇到的网站是http://www.thamon.co.uk/ 如果您使用Safari打开页面,它会将徽标与所有页面的正文重叠。

在styles.css中我有他跟随与标题相关联的代码,我认为这与代码有点相关

.header {
        position: relative; 
    }
        .header .header-primary-content { 
            display: table;
            width: 100%;
            position: relative; 
            padding: 10px 0;
            margin-bottom: 10px;

            border-bottom: 1px solid #e6e6e6; 
        } 
            /* Border shadow */
            .header .header-primary-content:after { 
                content: " ";
                position: relative;
                z-index: -1; 
                bottom: -2px;
                left: 0;
                width: 100%;
                height: 1px;

                background: rgba(255, 255, 255, .5);
            }
                .logo, .header-buttons {
                    display: table-cell;
                    vertical-align: middle;

                }

                /**
                 * Logo
                 */
                .logo {
                    width: 70%;
                }
                    .logo a {
                        display: inline-block;

                    position: relative;

                        width: 120px;
                        height: 40px;
                        margin-left: 410px;

                        vertical-align: middle

                        color: #444652;
                        text-shadow: 1px 1px #fff, 0px 0px #0E0E0E, 2px 3px 1px #E3E3E3;
                        font: normal 400 60px 'Merriweather', Georgia, "Times New Roman", Times, serif;
                    }
                        .no-touch .logo a:hover {
                            animation: tinywiggle 220ms ease-out;
                        }

1 个答案:

答案 0 :(得分:0)

当徽标的高度为120px x 147px时,您在.logo上放置了40px的高度。尝试将.logo a的高度与img匹配,或者从.logo a

中删除高度