在CSS中为所有网络浏览器设计网页。

 收藏

尊敬的先生/女士,

我已经写了一些CSS代码来设计网页。如我所测试的,这些代码在FireFox浏览器中产生了很好的设计,但在InternetExplorer和GoogleChrome中却没有。也可能无法在其他浏览器中使用。

但是我的问题是,如何用这些CSS代码为几乎所有浏览器生成设计良好的网页。

先生/女士,请指导我,

我的密码是...

body{background:white;}

h1{text-align:center;}
input{font-size:40px; color:white;background:green;}

#leftcol{
color:white;
background:green;
position:absolute;
border:2px solid gray;
top:120px;
left:30px;
width:148px;
height:416px;
padding: 10px;  padding-top: 20px;
}

#content{
font-size:20px;
text-align:center;
color:white;
background:green;
position:absolute;
border:2px solid gray;
top:120px;
left:200px;
width:766px;
height:416px;
padding: 10px;  padding-top: 20px;


}

#header{
font-size:50px;
text-align:center;
color:red;
background:#0f0;
position:absolute;
border:2px solid gray;
top:30px;
left:30px;
width:936px;
height:68px;
padding:10px;
}

#footer{
color:black;
background:#0f0;
position:absolute;
border:2px solid gray;
top:568px;
left:30px;
width:936px;
height:16px;
padding:10px;
}
回复
  • T和T 回复

    There's no sign of a doctype in your html, and a lack of a doctype always triggers quirks mode, which is a different model in different browsers.
    http://www.alistapart.com/articles/doctype/
    and choose the HTML 4.01 Strict (or Transitional). Ignore the XHTML, as many browsers convert it back to html, so you gain nothing from using it - it's an evolutionary dead-end in web design.

  • 我是歌手 回复

    尊敬的先生/女士,

    我正在等待您对我的CSS代码的建议。

  • zhic 回复

    pixels are not a layout tool,
    the size of a pixel is dependent on screen resolution, and gets smaller with every new development of monitor.
    previously a 15inch monitor was 800px wide, 53px/inch
    this laptop has 160px/inch,
    Ipad Retina display 9.7-inch (diagonal)(7.7*5.82)2048-by-1536-pixel 264px/inch
    the next gen(in 3months??) will doubtless be higher
    any page laid out in fixed dimensions will only look 'right' on the screen it was laid out on, even if the user is using the same browser, and will fail on any other resolution or in part-screen windows
    Current best practice is em (for typeface) and % (for elements) as layout dimensions. These scalar quantities adjust to window size, screen resolution user preference and basefont settings, on all devices from telephones(200px screen) to this thing plugged into a projector, as it is at the moment (3200px 8 feet wide) playing wolfenstein.
    fonts in em, adjust to user preference instead of overriding them, making the site instantly disability friendly
    a site css coded to add to 100% will work in all ( fingersX :) ) devices.
    together with examining css @media handheld{} to iconify images for smaller devices, and other tweaks
    example only

    body{background:white;} 
    h1{text-align:center;}
    input{font-size:2em; color:white;background:green;} 
    #leftcol{color:white;background:green;position:absolute;border:0.1em solid gray;top:2%;left:2%;width:10%;height:30%;padding:.1em;padding-top:.2em;}

    仍然不是完美的但更接近

    顺便说一句,深色地面上的白色文字对用户非常不友好,眼睛无法正常工作

  • 回家吃饭 回复

    我已经按照您的建议检查了我的代码,但是效果不好。我坚持这些代码。还有其他方法可以取得良好结果吗?我做了很多实验,但没有找到正确的方法。先生,请再引导我一次。我将代码放在这里供您参考。

    CSS代码

        body{background:red;} 
    
    input{font-size:1.3em;color:white;background:green;}
    
    #leftcol{
    color:white;
    background:green;
    position:absolute;
    top:12%;
    left:2%;
    width:22%;
    height:80%;
    }
    
    #content{
    text-align:center;
    color:white;
    background:green;
    position:absolute;
    top:12%;
    left:22%;
    width:76%;
    height:80%;
    }
    
    #header{
    text-align:center;
    color:red;
    background:#0f0;
    position:absolute;
    top:2%;
    left:2%;
    width:96%;
    height:10%;
    font-size:250%;
    
    }
    #footer{
    color:black;
    background:#0f0;
    position:absolute;
    top:92%;
    left:2%;
    width:96%;
    height:6%;
    font-size:100%;
    }
    

    ASP文件

        <html>
    <head>
    <title>Puzzle Number</title>
    <link rel="stylesheet" type="text/css" href="StylePuzzle.css" />
    <script type="text/javascript" src="JSPuzzle.js"></script>
    </head>
    
    <body onload="Ask()">
    
    <div id="header">
    Welcome to the Puzzle Number
    </div>
    
    <div id="content">
    <h1>Arrange these numbers in ascending/descending order</h1>
    
    
    <input type="button" style="height:15%;width:10%;" Id=n1 value="2" OnClick="checknumber('1')">
    <input type="button" style="height:15%;width:10%;;" Id=n2 value="4" OnClick="checknumber('2')">
    <input type="button" style="height:15%;width:10%;" Id=n3 value="8" OnClick="checknumber('3')">
    <br>
    <input type="button" style="height:15%;width:10%;" Id=n4 value="1" OnClick="checknumber('4')">
    <input type="button" style="height:15%;width:10%;" Id=n5 value="5" OnClick="checknumber('5')">
    <input type="button" style="height:15%;width:10%;" Id=n6 value="7" OnClick="checknumber('6')">
    <br>
    <input type="button" style="height:15%;width:10%;" Id=n7 value="" OnClick="checknumber('7')">
    <input type="button" style="height:15%;width:10%;" Id=n8 value="6" OnClick="checknumber('8')">
    <input type="button" style="height:15%;width:10%;" Id=n9 value="3" OnClick="checknumber('9')">
    <br/>
    <input type="button" style="height:8%;width:31%;" Id=CTN value="Clicked = 0">
    </div>
    
    <div id="leftcol">
    <center>
    <h2>Hello,</h2>
    
    <input type="button" style="height:8%;width:70%;" Id=Player value="Player Name">
    <Br>
    <h2>Best Score</h2>
    
    <input type='button' style='height:8%;width:70%;' Id=BtnName value="P. Name">
    <Br>
    <input type='button' style='height:8%;width:70%;' Id=BestScrore value="Clicked=">
    <Br>
    <h2>Next Puzzle</h2>
    <input type='button' style='height:8%;width:70%;' Id=NxtPzzle value="More Puzzle">
    </center>
    </div>
    
    <div id="footer"><center>Developed by Mr. Pankaj Mani Das</center></div>
    </body>
    </html>
    

  • 延>X 回复

    您的代码未缩进。现在好点了吗?

  • hehe 回复

    IE6被全世界1%的用户使用-因此,除非您的站点每天获得成千上万的唯一身份,否则您可以忽略那里的任何问题。

    我不知道为什么您的JavaScript无法在Firefox中使用。

  • lsunt 回复

    抱歉,先生,我无法在此处放置ASP / HTML文件的代码。上面仅列出了该文件的几行。但是,当我尝试编辑以上帖子时,代码在那里。我不知道该怎么办。昨天我也无法第二次登录。我不知道这里发生了什么。 Daniweb的新设计可能无法正常工作。

  • Tom 回复

    我发现了syntex /原因,为什么在将doctype声明放入ASP文件后JavaScript无法在FireFox中工作。只是因为没有使用getElementById

    以前,我曾经这样使用过...

    if(num=='1')
    {
     if (n2.value=='')
     {
      n2.value=n1.value;
      n1.value='';
      Payer.value=Prom;
     }
     else if (n4.value=='')
     {
      n4.value=n1.value;
      n1.value='';
     }
    }
    

    现在,我已经这样使用了.....

    if(num=='1')
    {
     if (document.getElementById('n2').value=='')
     {
      document.getElementById('n2').value=document.getElementById('n1').value;
      document.getElementById('n1').value='';
     }
     else if (document.getElementById('n4').value=='')
     {
      document.getElementById('n4').value=document.getElementById('n1').value;
      document.getElementById('n1').value='';
     }
    }
    

    现在,JavaScript也可以在FireFox中使用。因此,尽管IE6中存在布局问题,但我正在关闭此线程。谢谢大家使用有价值的信息回复此线程。

  • 呤!! 回复

    谢谢女士(cscgal),

    现在我的代码看起来不错。

  • het 回复

    尊敬的约翰博士,

    感谢您回复先生,您提到html中没有Doctype声明。因此,我尝试将Doctype声明放在我的asp文件中。而且我已经尝试过同时使用html 4.01 Strick和过渡版本,结果如​​下...

    1. Firefox 11-按照我的要求,布局很好,但是JavaScript无法正常工作。请让我知道我该怎么做。 IE 6-布局不好,但是JavaScript正常工作。 IE 8和Google Chrome-一切正常。此处的布局和JavaScript正常运行。

    注意:我已经使用Windows记事本编写了所有代码。