代码之家  ›  专栏  ›  技术社区  ›  Elias Zamaria

Openwave移动浏览器曲解了CSS子选择器和子选择器

  •  1
  • Elias Zamaria  · 技术社区  · 16 年前

    我正在设计一个网站,并在运行Openwave移动浏览器6.2.3.2的lgvx8360手机上进行测试。在我的网站上有很多东西看起来不对劲,我注意到浏览器没有正确处理CSS子选择器或子选择器。我做了一个这样的页面:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Mobile test</title>
    <style type="text/css">
    div div {
        background: yellow}
    </style>
    </head>
    <body>
    <div>test 1 - this div should have no background</div>
    <br>
    <div><div>test2 - this div should have a yellow background</div></div>
    </body></html>
    

    编辑:

    我做了菲利佩建议的一些测试。不管声明后面是否有分号,我都会看到同样的东西。我试着去掉style元素,并将黄色背景放在内部test2div的一个style属性中,一切都按预期进行。我尝试添加“div{background:red;}”,但两个div仍然是黄色的。我切换了测试1和测试2的div,两个div都是黄色的。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Mobile test</title>
    <style type="text/css">
    div {
        background: red;}
    .foo div {
        background: yellow;}
    </style>
    </head>
    <body>
    <div>test 1 - this div should be red.</div>
    <br>
    <div class="foo"><div>test 2 - this div should be yellow.</div></div>
    </body></html>
    

    两个女主角都是红色的。我用id代替class做了类似的事情,两个div都是红色的。

    我试着将字符集设置为ISO-8859-1,结果一切都一样,所以我认为这与问题无关。我去掉了meta标签,一切都没变。

    我试着把CSS放到一个外部文件中。当我使用link元素包含它时,我看到的结果与以前相同。如果我尝试使用@import包含它,我看不到任何样式。我的手机似乎无法访问使用@import引用的CSS文件。

    不用说,这快把我逼疯了。我做的测试越多,情况就越奇怪。我能怎么办?

    编辑2: 当然,我可以买一部新手机,但我正在努力建立一个网站,可以在任何一种支持互联网的设备上工作。

    我看着 this guide 与移动CSS兼容,找不到任何关于我的浏览器的信息。我正要去查看博客帖子。

    编辑4:

    1 回复  |  直到 16 年前
        1
  •  0
  •   FelipeAls    16 年前

    Peter Paul Koch测试和兼容表以及移动浏览器上的博客文章可以为您提供很多帮助: http://www.quirksmode.org/mobile/

    这是一个WAP浏览器有(显然)问题的HTML网站?如果可能的话,买点什么,或者买另一部手机(智能手机)或者。。。它混合了吗?:)或建立一个WAP网站(编辑:万一,我和WAP网站开玩笑)

    否则需要进一步的测试,正如我在对你的问题的评论中提到的。

    • 以不同的方式加载CSS(老式的@import,样式属性还可以吗)
    • 删除style元素的type属性(仍尝试以不同方式加载CSS)
    • 通过添加文本和完全不同的div顺序来实现略有不同的HTML代码
    • id和类选择器
    • 删除每个端点标记
    • 删除meta