Question

我正在编辑的网站有一个搜索表单。为了记录，网站上还有其他几种形式，联系方式等。这是唯一一个有问题的人。

提交表单后，IE9中可能会丢失一些样式（可能还有其他版本的IE，还没有测试过）。主要是，html和body中设置的边距和颜色似乎已经丢失。菜单，横幅，文字等似乎都保留了样式。所有样式都在一张纸上，在这里使用......

任何有用的建议？

以下是搜索页面的内容和用于检查表单的php，如果有帮助的话，以及我认为丢失的CSS。

编辑：该页面是一个搜索页面，几乎没有任何内容。搜索会重新加载同一页面，同时显示搜索功能的结果。因此，应嵌入相同的嵌入式工作表，就我所见，显示相同的html ...如果这有助于讨论任何。仍在筛选以找到某种类型的错误。 IE开发工具似乎也表明在IE7的早期版本中也会出现此错误，在IE7-8中查看...

HTML：

<div id="search">
        <br />
            <div style="float:right;font-size:.8em;">
                <form name="form_sidesearch" action="search.html" method="post">
                <input type="hidden" name="action" value="search" />
                <input type="text" name="search_value" value="<?php echo $systems_primary->search_value ?>" />
                <input type="submit" name="submit_search" value="Search Website" />
                </form> <br />

            </div>
    </div>

<?php echo stripslashes($search_results);

PHP：

<?php

// -- Begin Search --------------------------------------------------------------------------------------
if($_REQUEST["action"] === "search")
{
  if(strlen($_REQUEST["pg"]) <= 0)
  {

  $_REQUEST["pg"] = 1;
  }

  $search_results = $systems_primary->search_website("index",urldecode($_REQUEST["search_value"]),"<div class=\"listing ui-corner-all\"><a href=\"{ENTRY_URL}\" title=\"{ENTRY_TITLE}\" class=\"listing_title\">{ENTRY_TITLE}</a>{ENTRY_CONTENT} <a href=\"{ENTRY_URL}\" title=\"{ENTRY_TITLE}\" style=\"font-size:.8em;\">...read more</a></div><br /><br />",345,"all",10,$_REQUEST["pg"]);
}

// -- End Search ----------------------------------------------------------------------------------------
?>

失败的CSS（可能更多）：

html {
background-color:#F6E6C8;
font-size:16px;
font-family:Helvetica;
}
body {
    width:1027px;
    margin:0 auto;
    background-color:#ffffff;
    font-family: arial, 'times new roman', sans-serif;
}

详细说明：实际发生的事情是页面内容整体向左移动并保持左对齐，而不是使用自动边距保持居中。此外，html背景颜色丢失。搜索字段的样式也会丢失或被忽略。不确定还有什么可能改变。

Answer 1

通常在提交表单后丢失样式时，特别是当它是Ajax操作而不是整页重新加载时，这是因为使用JavaScript或jQuery时应用了一些样式，当页面的更新部分为时，它们没有被重新应用重新加载。这可能涉及创建其他元素，或者可能涉及将CSS类添加到一个或多个元素。

HTML表单元素的样式特别容易发生这种情况，因为在某些情况下，某些表单元素的重量样式只能在JavaScript或jQuery的帮助下完成。

在这种情况下，识别首次加载页面时设置相关内容样式的JavaScript或jQuery，然后在页面更新后重新应用（在Ajax调用成功完成后，或者在浏览器重新加载页面后）或加载新页面。）

如果做不到这一点，请比较之前和之后页面的HTML并查看更改内容。 body标签上可能有一个CSS类，或者没有得到一致设置的容器类。如果加载了新页面，则可能会下载一组不同的CSS文件，或者可能存在一个页面具有的嵌入式样式表，而另一个页面没有。

如果失败，请验证HTML和CSS是否有效。在渲染无效代码时，某些浏览器比其他浏览器更宽容。可能看起来像浏览器错误可能是由错误的代码引起的。

如果所有这一切都没有发现并且问题似乎越来越可能是由一个模糊的浏览器错误引起的，那么将代码减少到可以一致地再现问题的最简单的状态，并尝试更清楚地识别究竟是什么错误的本质。这样可以更轻松地搜索可能的修复程序并寻求帮助。在减少代码的过程中，如果问题突然消失，最后删除的代码可能会导致问题至少部分负责。

相反，当看起来似乎没有问题的押韵或理由时，从头开始重新实现代码有时会有所帮助，看看问题是否仍然存在。如果问题在编写代码时在某个时刻开始发生，那么同样添加的最后一个代码可能至少部分地解决了问题。

Answer 2

你可以这样做......

$('#yourForm").on('submit',function(e){
 $(this).css({
 // reasign all the atributes you lost
 });
 e.preventDefault();
});

IE9在特定表单提交后丢失了一些CSS

2 个答案: