【发布时间】：2017-02-04 01:52:52
【问题描述】：
<!-- Main -->
<div id="main-wrapper">
<div class="container">
<div id="content">
<article>
<!-- Form Code Start -->
<form id='contactus' action='<?php echo $formproc->GetSelfScript(); ?>' method='post' accept-charset='UTF-8'>
<fieldset>
<legend>Contact us</legend>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<input type='hidden' name='<?php echo $formproc->GetFormIDInputName(); ?>' value='<?php echo $formproc->GetFormIDInputValue(); ?>'/>
<input type='text2' class='spmhidip' name='<?php echo $formproc->GetSpamTrapInputName(); ?>' />
<div class='short_explanation'>* required fields</div>
<div>
<span class='error'>
<?php echo $formproc->GetErrorMessage(); ?>
</span>
</div>
<div class='container2'>
<label for='name' >Your Full Name*: </label><br/>
<input type='text2' name='name' id='name' value='<?php echo $formproc->SafeDisplay('name') ?>' maxlength="50" /><br/>
<span id='contactus_name_errorloc' class='error'></span>
</div>
<div class='container2'>
<label for='email' >Email Address*:</label><br/>
<input type='text2' name='email' id='email' value='<?php echo $formproc->SafeDisplay('email') ?>' maxlength="50" /><br/>
<span id='contactus_email_errorloc' class='error'></span>
</div>
<div class='container2'>
<label for='phone' >Phone Number:</label><br/>
<input type='text2' name='phone' id='phone' value='<?php echo $formproc->SafeDisplay('phone') ?>' maxlength="15" /><br/>
<span id='contactus_phone_errorloc' class='error'></span>
</div>
<div class='container2'>
<label for='query_type' >Regarding:</label><br/>
<select name='query_type'>
<option>Support</option>
<option>Request A Quote</option>
<option>Trouble uploading a file</option>
<option>Other</option>
</select>
<span id='contactus_email_errorloc' class='error'></span>
</div>
<div class='container2'>
<label for='message' >Message:</label><br/>
<span id='contactus_message_errorloc' class='error'></span>
<textarea rows="10" cols="50" name='message' id='message'><?php echo $formproc->SafeDisplay('message') ?></textarea>
</div>
<div class='container2'>
<div><img alt='Captcha image' src='show-captcha.php?rand=1' id='scaptcha_img' /></div>
<label for='scaptcha' >Enter the code above here:</label>
<input type='text2' name='scaptcha' id='scaptcha' maxlength="10" /><br/>
<span id='contactus_scaptcha_errorloc' class='error'></span>
<div class='short_explanation'>Can't read the image?
<a href='javascript: refresh_captcha_img();'>Click here to refresh</a>.</div>
</div>
<div class='container2'>
<input type='submit' name='Submit' value='Submit' />
</div>
</fieldset>
</form>
</article>
</div>
</div>
</div>#contactus fieldset{
padding:20px;
border:1px solid #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
margin:0 auto;
width:459px;
}
#contactus legend, h2{
font-family : Arial, sans-serif;
font-size: 1.3em;
font-weight:bold;
color:#333;
}
#contactus label2{
font-family : Arial, sans-serif;
font-size:0.8em;
font-weight: bold;
}
/* #contactus input[type="text2"], textarea{
font-family : Arial, Verdana, sans-serif;
font-size: 0.8em;
line-height:140%;
color : #000;
padding : 3px;
border : 1px solid #999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
#contactus input[type="text2"]{
height:26px;
width:459px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#contactus #scaptcha{
width:80px;
height:26px;
}
#contactus input[type="submit2"]{
width:100px;
height:30px;
padding-left:0px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#contactus textarea2{
height:120px;
width:469px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
#contactus input[type="text2"]:focus,textarea:focus{
color : #009;
border : 1px solid #0E0D0D;
background-color : #D1E7FF;
font-weight:bold;
}
#contactus .container2{
margin-top:8px;
margin-bottom: 10px;
}
#contactus .error{
font-family: Verdana, Arial, sans-serif;
font-size: 0.7em;
color: #900;
background-color : #FF8088;
}
#contactus fieldset#antispam{
padding:2px;
border-top:1px solid #EEE;
border-left:0;
border-right:0;
border-bottom:0;
width:350px;
}
#contactus fieldset#antispam legend{
font-family : Arial, sans-serif;
font-size: 0.8em;
font-weight:bold;
color:#333;
}
#contactus .short_explanation{
font-family : Arial, sans-serif;
font-size: 0.8em;
color:#333;
}
/* spam_trap: This input is hidden. This is here to trick the spam bots*/
#contactus .spmhidip{
display:none;
width:10px;
height:3px;
}
#fg_crdiv{
font-family : Arial, sans-serif;
font-size: 0.3em;
opacity: .2;
-moz-opacity: .2;
filter: alpha(opacity=20);
}
#fg_crdiv p{
display:none;
} 我已经尝试了所有方法，但无法弄清楚是什么影响了表单，导致它在移动设备上从屏幕上消失。 Here is the link to the form.
【问题讨论】：
-
我的想法是你还没有尝试“一切”，但让我们看看你尝试过的代码
-
它不允许我在这里跳过整个代码页
-
如果您使用引导程序，则根本不需要编写任何媒体查询代码，只需将页面内容包装在容器 div 中
-
我没有使用引导程序
-
你的意思是你的大部分css被注释掉了吗？
*/
标签： css forms mobile media-queries