在我的网站上,IE7似乎忽略了某些CSS属性选择器.奇怪的是,只有当页面来自生产服务器时才会发生.如果我的个人服务器上有完全相同的代码,或保存在我的硬盘上,它可以正常工作.以下是导致问题的示例:
<!DOCTYPE HTML>
<html><head>
<title>IE display test</title>
<style type="text/css">
[type=button] {
display: block;
}
</style>
</head>
<body>
<input type="button" value="Button 1"/>
<input type="button" value="Button 2"/>
<input type="button" value="Button 3"/>
</body></html>
由于按钮上的显示设置为"阻止",因此它们应垂直排列.但只有当我的生产服务器提供页面时,它们才会水平排列.当我使用开发人员工具栏检查样式时,我没有像往常一样看到"显示"属性.我唯一能想到的可能是这会导致页面的URL或来自服务器的响应头.我可以通过实验来弄清楚,但这样做会很不方便和耗时,所以在我这样做之前,我想问:为什么会发生这种情况以及可以做些什么呢？
编辑:我想出了一个小提琴.它在该网站上看起来很好.
编辑2:以下是来自生产服务器的响应标头:
HTTP/1.1 200 OK
服务器:Apache-Coyote/1.1
内容类型:text/html; charset = utf-8
内容 - 语言:en-US
内容长度:291
日期:星期三,2012年1月18日21:32:48 GMT
编辑3:以下是我个人服务器的响应标题:
HTTP/1.1 200 OK
日期:星期三,2012年1月18日21:37:30 GMT
服务器:Apache
变化:接受编码
内容编码:gzip
内容长度:176
保持活动:超时= 2,最大= 100
连接:保持-Alive
Content-Type:text/html; charset = utf-8
生产服务器不应用gzip压缩,因为它只对大于特定大小的文件执行此操作.如果我添加一些东西来使文件足够大,它使用gzip,我仍然在IE7中看到问题,所以这似乎与gzip没有任何关系.
我尝试配置我的个人服务器以发送"内容 - 语言"标题,如生产服务器,并没有触发问题.
我不知道是否有任何其他标题与此有关.我可以尝试测试它们,但它会有点棘手,所以可能需要一些时间. …
html css internet-explorer css-selectors internet-explorer-7
我正在尝试使用属性选择器和CSS来格式化元素.
HTML看起来像:
<div id="user" highlight="false">User Name</div>
CSS是:
[highlight=true]
{
background-color: red;
}
[highlight=false]
{
background-color: white;
}
然后是一些伴随的JavaScript:
if( foo )
{
node.setAttribute('highlight', true);
}
else
{
node.setAttribute('highlight', false);
}
这适用于Firefox和Chrome.当JavaScript更改突出显示属性时,元素的背景颜色会根据需要更改.然而,在IE8中,这是一个不同的故事.元素将根据HTML中最初指定的突出显示值正确显示,但是当动态更改属性时,元素的显示不会更改.
这是一个众所周知的怪癖吗？有一个已知的解决方法吗？
更新 我刚刚将属性名称更改为"frob",其值为"on"和"off".这应解决有关保留或可解释值的任何问题.
还有一点需要注意.当我打开IE8开发人员工具并使用HTML检查器时,它将显示样式[frob = on]或[frob = off],因为应用于我启动文档检查器时的任何值.但是,frob属性将不再在检查器视图中更改.在初始渲染HTML之后,[frob = on/off] css中的值决不会被应用.
更新:解决问题解决 方案是强制重绘.有多种方法可以做到这一点,但似乎标准的方法是将className重新分配给自己.
HTML:
<div id="fields">
<input type="text" name="someField" />
<!-- NOTE: There are some more fields here -->
</div>
<!-- NOTE: There are some more fields here -->
第一个JS文件:
jQuery(document).ready(function($) {
alert($('#fields input[type="text"]').val());
});
第二个JS文件:
jQuery(document).ready(function($) {
$('#fields input[type="text"]').val('someValue');
});
笔记:
任何帮助表示赞赏!谢谢!