html - 表格在手机上不可见

标签 html css 

html, body {
    -webkit-font-smoothing: antialiased;
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
    font-family: 'Open Sans', sans-serif;
    background-color: #f4f5f6;
}
h1 {
    font-weight: 700;
}
h2 {
    letter-spacing: -1px;
    font-weight: 300;
    margin-top: 0;
}
h3 {
    letter-spacing: -1px;
    font-weight: 100;
    margin-top: 0;
    font-size: 4em;
}
iframe{
    width: 100%;
    border: 0;
}
/*#features,#support,#testimonials,#news, #bottom{background-color: #f4f5f6;}*/

/* Wrapper for page content to push down footer */

#wrap {
    min-height: 100%;
    height: auto!important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -60px;
    color: #333;
}
/* Set the fixed height of the footer here */

#push {
    height: 60px;
}
/*Navbar Customizations*/

.navbar-purity {
    background: #2D3538;
    background-color: #2D3538;
    filter: none;
    background-image: none;
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -mox-box-shadow: none;
    -webkit-transition: background .3s ease;
    -moz-transition: background .3s ease;
    -o-transition: background .3s ease;
    -ms-transition: background .3s ease;
    transition: background .3s ease;
}
.navbar-purity {
    background: rgba(46, 46, 46, 0.35);
    border: none;
}
.navbar-purity .navbar-brand {
    padding: 10px 5px;
}
.navbar-purity .navbar-toggle{
    border-color: transparent;
}
.navbar-purity .navbar-toggle {
  border-color: transparent;
}
.navbar-purity .navbar-toggle:hover,
.navbar-purity .navbar-toggle:focus {
  background-color: #333;
}
.navbar-purity .navbar-toggle .icon-bar {
  background-color: #fff;
}
.navbar-purity.sticky {
    background: rgba(0, 0, 0, 0.7);
    border-bottom: none;
}
.navbar-purity.sticky .nav > li > a:hover {
    color: #fff;
    background: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -mox-box-shadow: none;
}
.navbar-purity.sticky .nav > li.active a {
    background: transparent;
    color: #fff;
    box-shadow: none;
    -webkit-box-shadow: none;
    -mox-box-shadow: none;
}
.navbar-purity.sticky .nav > li a {
    background: transparent;
    color: #b4b4b4;
    box-shadow: none;
    -webkit-box-shadow: none;
    -mox-box-shadow: none;
}
.navbar-purity.sticky .dropdown-menu li >a {
    display: block;
    clear: both;
    font-weight: 400;
    line-height: 20px;
    white-space: nowrap;
}
.navbar-purity .sticky .dropdown-menu li > a:hover, .navbar-purity .sticky .dropdown-menu li > a:focus, .navbar-purity .sticky .dropdown-submenu:hover > a {
    text-decoration: none;
    color: #FFF;
    background-color: #292929;
    background-image: none;
}
.navbar-purity .dropdown-menu li > a:hover, .navbar .dropdown-menu li > a:focus, .navbar .dropdown-submenu:hover > a {
    text-decoration: none;
    color: #FFF;
    background-color: #292929;
    background-image: none;
}
.navbar .nav > li > .dropdown-menu:after {
    border-bottom: 6px solid #383838;
}
.dropdown-menu {
    margin: 5px 0 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    background-color: #383838;
    padding: 0;
    border: 0;
    ;
}
.dropdown-menu li > a {
    color: #a5a5a5;
    padding: 10px;
    border-bottom: 1px solid #474747;
}
.navbar-fixed-top .navbar-inner, .navbar-static-top .navbar-inner {
    box-shadow: none;
    -webkit-box-shadow: none;
    -mox-box-shadow: none;
}
.navbar .nav > li > a {
    text-shadow: none;
    color: #d3d3d3;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    vertical-align: middle;
    font-size: 15px!important;
    padding: 18px;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    box-align: center;
    -webkit-transition: color .3s ease;
    -moz-transition: color .3s ease;
    -o-transition: color .3s ease;
    -ms-transition: color .3s ease;
    transition: color .3s ease;
}
.navbar .nav > li > a:hover {
    color: #999;
    background: rgba(0, 0, 0, 0.36);
    box-shadow: none;
    -webkit-box-shadow: none;
    -mox-box-shadow: none;
}
.navbar .nav > li.active a {
    background: rgba(0, 0, 0, 0.36);
    color: #999;
    box-shadow: none;
    -webkit-box-shadow: none;
    -mox-box-shadow: none;
}
.navbar .nav > li.active a:hover {
    background: rgba(0, 0, 0, 0.36);
    color: #C6D0D3;
    box-shadow: none;
    -webkit-box-shadow: none;
    -mox-box-shadow: none;
}
/* Nav bar CSS END*/

/*General Items CSS*/

#main-media {
    padding-bottom: 10px;
}
section {
    position: relative;
}
header {
    background: url(../images/header2.jpg) no-repeat fixed #020202;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.btn-landing {
    text-shadow: 0 -1px 0 #6c9a15;
    color: #fff;
    background-color: #8AB833;
    background-image: 0;
    background-image: 0;
    background-image: 0 to(#6c9a15));
    background-image: 0;
    background-image: 0;
    background-image: linear-gradient(top, #a8d651, #6c9a15);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a8d651', endColorstr='#6c9a15', GradientType=0);
    border-color: #8AB833 #6c9a15 #6c9a15 #8AB833;
    border-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.25);
}
.btn-landing:hover, .btn-landing:active, .btn-landing.active, .btn-landing.disabled, .btn-landing[disabled] {
    background-color: #6c9a15;
}
.btn-landing:hover {
    color: #fffffb;
    text-shadow: 0 -1px 0 #4e7c00;
}
.btn-landing:focus {
    color: #eeff97;
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    border-color: #8AB833 #6c9a15 #6c9a15 #8AB833;
    border-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.25);
}
.btn-landing.active, .btn-landing:active {
    background-image: none;
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #eeff97;
}
.btn-landing {
    font-family: Open Sans, sans-serif;
    min-width: 200px;
    padding: 20px;
    font-size: 19px!important;
    font-weight: 300;
    background: #8AB833;
    border-radius: 0;

当我在个人电脑或平板电脑上查看我的页面时，注册表单是可见的，但如果我在移动设备上查看，则表单不显示？在过去的 4 个小时里，这让我抓狂，我似乎找不到解决方案!

这是我的来源

  <!--################ HEADER START ################-->
        <header id="top" data-stellar-background-ratio="0">
            <div class="container home">
                <div class="flexslider home">
                    <ul class="slides">
                        <li class="margintop10p">
                            <h1>Set Your Course For The Life You <span style="color: #f4f400"> Always Wanted</span></h1>
                        </li>       
                  </ul>
                  </div>         
<div class="col-md-12">               
            <div class="subscribe">
            <center>
                <h2 class="info-text">Sign Up For Your FREE Introductory Session.</h2>
                <h4 class="info-text"> <span style="color: #FFFFFF">Discover the power of the subconscious and how to use it to live a life that you love!</span></h4>
            <div class="row">
            <form class="form-inline" class="infusion-form" accept-charset="UTF-8" action="https://zi258.infusionsoft.com/app/form/process/2ae00069f47efab206dbbafa757ff586" method="POST" target="_blank">
                        <input name="inf_form_xid" type="hidden" value="2ae00069f47efab206dbbafa757ff586" />
                        <input name="inf_form_name" type="hidden" value="Free Session Sign Up" />
                        <input name="infusionsoft_version" type="hidden" value="1.45.0.48" />
            <div class="form-group">
                <label class="sr-only" for="inf_field_FirstName">First Name</label>
                <input class="form-control" class="infusion-field-input-container" id="inf_field_FirstName" name="inf_field_FirstName" type="text" placeholder="Enter first name" />
            </div>
            <div class="form-group">
                <label class="sr-only" for="inf_field_Email">Email</label>
                <input class="form-control" class="infusion-field-input-container" id="inf_field_Email" name="inf_field_Email" type="email" placeholder="Enter email"/>
                <input class="btn btn-success btn-fill" type="submit" value="Sign Up" target="_blank"/>
            </div>      
            </form>     
            </div>          
            </center>
            </div>
</div>          
                <div class="social-header hidden-phone">
                    <a href="https://twitter.com/imadhull" target="_blank" class="social-network sn2 twitter"></a>
                    <a href="https://www.facebook.com/amit.dhull" target="_blank" class="social-network sn2 facebook"></a>
                    <a href="https://plus.google.com/+AmitDhullCoaching/" target="_blank" class="social-network sn2 google"></a>
                    <a href="https://instagram.com/iamadhull/" target="_blank" class="social-network sn2 picasa"></a>
                </div>
            </div>
            <div id="home-arrow" class="hidden-phone">
                <a href="#features"><i class="icon-double-angle-down icon-3x" id="iconHome"></i></a>
            </div>
        </header>
        <!--################ HEADER END ################-->

最佳答案

这很难说，但我相信这是由于您的固定高度 header#top 造成的。

我检查了表格以将其显示在检查面板中，然后我使用 Chrome 设备模拟器并选择了“Samsung Galaxy S III”。当我进入这个新 View 时，表格不在那里。由于我已经选择了该元素，因此 DOM 高亮显示它位于下一个内容下方。我尝试使用 position:absolute; z-index:10; 当然它只是在错误的位置。为了解决这个问题，我遍历了元素的所有祖先，发现它是 header#top 的 height:...px(抱歉，我才刚刚意识到这个值是从运行时的屏幕高度，因此不会出现在您的文件中......)。删除它可以解决问题 - 我认为。如果不进行真实测试，很难说 - 毕竟，我只是模仿。

Picture of where header#top is in comparison to the input tag

因此，要修复它，请尝试将其添加到 header{...}

height: auto!important;
min-height: 100vh;

关于html - 表格在手机上不可见，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32480496/

上一篇：html - 使用 angularjs 动态更改元素的 css 类

下一篇：html - 表格中可点击行的错误 (Rails 4)

相关文章：

Javascript 不删除 div 中的所有元素

javascript - Div 元素仅出现几秒钟

html - 如何制作 Twitter 风格的垂直穿过的透明方形流体？

html - Bootstrap 一次折叠所有阅读更多

javascript - 核心 HTML/CSS/Javascript 框架

html - 带有边框半径的填充与内部图像重叠

javascript - 如何在背景图像上上下滑动图像以创建扫描效果？

jquery - 使用 jquery 淡入淡出

javascript - JQuery .show() 和 .hide() 无法正常工作

css - 深入了解我的意见

©2024 IT工具网  联系我们