html - 修复了 div 在 IE 和移动设备上无法正确呈现的问题

Question

我是前端技术的新手。我正在尝试建立一个简历网站。我有 2 个固定的 div。顶部的一个用作导航栏。此 div 无法在移动设备上正确呈现。它只显示了 4 个按钮，其余的不是 renderin。

我的联系表单 div 显示在 800 像素的滚动条上。我为此使用了 Jquery。尽管我的 contact-me-form 在 IE11 上呈现不佳，但我在 Chrome 浏览器上的视野很好。

真实观点:[IMG] http://i62.tinypic.com/fjjgau.png[/IMG]

损坏的联系表[IMG] http://i58.tinypic.com/2ccmoag.png[/IMG]

损坏的固定导航栏:[IMG] http://i59.tinypic.com/5lxil4.jpg[/IMG]

欢迎提出任何解决此问题的建议。顺便说一句:我使用 HTML5。

<nav class="navbar">
    <ul class="menu">
        <li><a class="btn btn-alt" href=#aboutme>aboutMe</a></li>
        <li><a class="btn btn-alt" href=#education>education</a></li>
        <li><a class="btn btn-alt" href=#workhistory>workHistory</a></li>
        <li><a class="logo" href="#top">||</a></li>
        <li><a class="btn btn-alt" href=#generalskills>generalSkills</a></li>
        <li><a class="btn btn-alt" href=#knowledge>knowledge</a></li>
        <li><a class="btn btn-alt" href=#myWorks>myWorks</a></li>
    </ul>
</nav>


.navbar {
    background-color: #3149e6;
    position: fixed;
    width: 100%;
    z-index: 0;
    opacity: 0.8;
    padding: 0;
    height: 50px;
}

.menu li {
    display: inline-block;
}

.menu li a{
    text-decoration: none;
}
.btn {
    display: inline-block;
    margin: 0;
}

.btn-alt {
    padding: 10px 30px;
    height: 30px;
    line-height: 30px;
    font-family: "Open Sans Condensed";
    color: aliceblue;
}

联系我表格:

    <div id='contact'>
                <div id='form_container'>
                    <div id='form_elements'>
                        <form action="mailto:@hotmail.comtr?subject=Hey let's have a talk" method="POST" enctype="text/plain">
                            <fieldset>
                                <legend><h3>contactMe</h3></legend>
                                <input type='text' placeholder='Your Name' size="30" name="Name">
                                <input type='text' placeholder='Your E-Mail' size="30" name="E-Mail">
                                <textarea rows="7" cols="40" placeholder='Write your message here.' name="comment"></textarea>
                                <input  type="submit" value="Submit">
                                <input  type="button" value="close" id="close" name="close">
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>

#contact{
    padding-left: 100px;
    padding-right: 100px;
    width: 320px;
    margin: 0 auto;
    display: block;
    position: fixed;
    z-index: 1;
    right: 0;
    bottom: 0;
}
#form_container {
    padding-top: 100px;
    padding-bottom: 20px;
    margin: 0 auto;
    display: block;

}
#form_elements{
    margin: 0 auto;
    text-align: center;
}

#form_elements fieldset{
    border: 1px dotted #5690e6;
    border-radius: 20px;
    box-shadow: black 0px 3px 8px;
}

#form_elements input, textarea{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    margin: 10px auto;
    resize:none;
}
#form_elements input{
    display: inline-block;
    width: 150px;
    margin-right: 10px;
    margin-left: 10px
}

Answer 1

您的顶部菜单栏不会呈现，因为您在 btn-alt 类上有以固定宽度度量 (px) 表示的填充。

如果您说每个菜单项的每一侧都必须有 30 像素的填充，这意味着每个菜单选项将是 60 像素 + 文本的宽度。您有 6 个这样的菜单选项，因此仅用于填充的最小宽度为 360px..

更好的方法是用 % 表示宽度，然后设置一个最小宽度属性，这样菜单项就可以相互插入..

.menu li {
    width: 16.6667%;
    min-width: 100px;
}

如果您真的对针对移动设备进行优化感兴趣，您应该查看 @media queries

与此同时，您的代码已更新 http://jsfiddle.net/vs8mwebx/