网站最初加载时 CSS 表被忽略

Question

我正在为一个亲密的家庭朋友企业设计这个网站，我几乎不减去搜索引擎优化，但是我在其中一个页面上发生了一件非常烦人的事情，因为我已经在网站上添加了这个第 3 方电子邮件表单。

当页面加载一瞬间时，所有 CSS 都会被忽略/覆盖，然后就会恢复正常。

它的发生是因为电子邮件表单，因为当我删除它时，它工作正常。这是电子邮件表单代码

<form id="emf-form" target="_blank" enctype="multipart/form-data" method="post" action="http://www.emailmeform.com/builder/form/n4JBWqS97920L" name="emf-form">
  <table style="text-align:left;" cellpadding="2" cellspacing="0" border="0" bgcolor="transparent">

    <tr valign="top">
      <td id="td_element_label_0" style="" align="">
        <li><strong>Name</b> <span style="color:red;"><small>*</small></span></li></strong>
      </td>
    </tr>
    <tr>
      <td id="td_element_field_0" style="">
        <input id="element_0" name="element_0" value="" size="30" class="validate[required]" type="text" />
        <div style="padding-bottom:8px;color:#000000;"></div>
      </td>
    </tr>
    <tr valign="top">
      <td id="td_element_label_1" style="" align="">
        <li><strong><b>Email</b> <span style="color:red;"><small>*</small></span></li></strong>
      </td>
    </tr>
    <tr>
      <td id="td_element_field_1" style="">
        <input id="element_1" name="element_1" class="validate[required,custom[email]]" value="" size="30" type="text" />
        <div style="padding-bottom:8px;color:#000000;"></div>
      </td>
    </tr>
    <tr valign="top">
      <td id="td_element_label_2" style="" align="">
        <li><strong><b>Subject</b> <span style="color:red;"><small>*</small></span></li></strong>
      </td>
    </tr>
    <tr>
      <td id="td_element_field_2" style="">
        <input id="element_2" name="element_2" value="" size="30" class="validate[required]" type="text" />
        <div style="padding-bottom:8px;color:#000000;"></div>
      </td>
    </tr>
    <tr valign="top">
      <td id="td_element_label_3" style="" align="">
        <li><strong><b>Message</b> <span style="color:red;"><small>*</small></span></li></strong>
      </td>
    </tr>
    <tr>
      <td id="td_element_field_3" style="">
        <textarea id="element_3" name="element_3" cols="60" rows="10" class="validate[required]">
</textarea>
        <div style="padding-bottom:8px;color:#000000;"></div>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <script type="text/javascript">
//<![CDATA[
        var RecaptchaOptions = {
                theme: 'clean',
                custom_theme_widget: 'emf-recaptcha_widget'
                };
        //]]>
        </script> <script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k=6LchicQSAAAAAGksQmNaDZMw3aQITPqZEsX77lT9">
</script> <noscript><iframe src="https://www.google.com/recaptcha/api/noscript?k=6LchicQSAAAAAGksQmNaDZMw3aQITPqZEsX77lT9" height="300" width="500" frameborder="0"></iframe><br />
        <textarea name="recaptcha_challenge_field" rows="3" cols="40">
</textarea> <input type="hidden" name="recaptcha_response_field" value="manual_challenge" /></noscript>
      </td>
    </tr>
    <tr>
      <td colspan="2" align="right">
        <input name="element_counts" value="4" type="hidden" /> <input name="embed" value="forms" type="hidden" /><input value="Send email" type="submit" /><input value="Clear" type="reset" />
      </td>
    </tr>
  </table>
</form>

，这是指向页面的链接，向您展示正在发生的事情，以及您是否需要查看任何其他源代码。

http://www.smithscreenprint.co.nz/contacts.html

任何帮助都是非常感谢。

Answer 1

它首先加载验证码。如果您想确认这一点，请删除该功能。我在几个浏览器上测试过，没有问题。所以这可能与您使用的浏览器（IE？）有关。解决这个问题的唯一方法可能是使用某种黑客手段。尝试不同的加载方式。如果你愿意的话，也不要在 css 中使用 @import 。