Fatal编程技术网
  • html/
  • Html 表单的跨浏览器兼容性问题

Html 表单的跨浏览器兼容性问题

html css google-chrome internet-explorer-8

Html 表单的跨浏览器兼容性问题,html,css,google-chrome,internet-explorer-8,webforms,Html,Css,Google Chrome,Internet Explorer 8,Webforms,我已经编写了一个客户信息表单，但它在IE8、chrome和Firefox中看起来不同。我希望它以相同的方式显示在所有三个浏览器中，如下所示 下图显示了它在其他浏览器中的外观 )火狐 )铬 )IE 8兼容模式 这是我的html代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">

我已经编写了一个客户信息表单，但它在IE8、chrome和Firefox中看起来不同。我希望它以相同的方式显示在所有三个浏览器中，如下所示

下图显示了它在其他浏览器中的外观

)火狐

)铬

)IE 8兼容模式

这是我的html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Web System</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="header">

        <div id="headerTop">
          <p>&nbsp;</p>
          <p>&nbsp;</p>
        </div>

        <div id="headerBottom"></div>
    </div>

    <div id="wrapper">
        <div id="flags"></div>
        <div id="topLine"></div>

        <div id="information">
            <div id="welcomeText">Welcome  ADMIN, CB002813</div>
            <div id="menuSearchText">Menu Search</div>
            <div id="menuSearchTextbox"><input type="text" id="menuSearch" name="menuSearch" /></div>
            <div id="searchIcon"></div>
            <div id="helpIcon"></div>
            <div id="helpText">Help</div>
            <div id="logoutIcon"></div>
            <div id="logoutText">Logout</div>
        </div>

        <div id="navigation">
            <div id="reservations"></div>
            <div id="rentals"></div>
            <div id="tariffs"></div>
            <div id="fleet"></div>
            <div id="tools"></div>
            <div id="reports"></div>
            <div id="systemManagement"></div>
            <div id="navigationRepeat"></div>
        </div>

        <div id="customerForm">
            <div id="customerHeader"></div>
            <form>
                <div id="firstLine">
                    <div id="customerNo">Customer No.</div>
                    <input type="text" name="customerNoText" id="customerNoText" size="13" />
                    <div id="title">Title</div>                    
                        <select id="titleCombo">
                            <option value="selectTitle"></option>
                            <option value="mr">Mr.</option>
                            <option value="mrs">Mrs.</option>
                            <option value="ms">Ms.</option>
                        </select>                  
                </div>
                <div id="secondLine">
                    <div id="firstName">First Name</div>
                    <div id="firstNameMandatory"></div>
                    <input type="text" id="firstNameText" name="firstNameText" size="13"/>
                    <div id="middleName">Middle Name</div>
                    <input type="text" id="middleNameText" name="middleNameText" size="13"/>
                    <div id="lastName">Last Name</div>
                    <div id="lastNameMandatory"></div>
                    <input type="text" id="lastNameText" name="lastNameText" size="13"/>
                    <div id="searchIcon2"></div>
                </div>
                <div id="thridLine">
                    <div id="delivery">Delivery</div>
                    <select id="deliveryCombo">
                        <option value="selectDelivery">Select</option>
                        <option value="document">Document</option>
                        <option value="nonDocument">Non Document</option>
                    </select>
                    <div id="collection">Collection</div> 
                    <select id="collectionCombo">
                        <option value="selectCollection">Select</option>
                        <option value="small">Small</option>
                        <option value="large">Large</option>
                    </select>
                </div>
                <div id="fourthLine">
                    <div id="flightNo">Flight No.</div>
                    <input type="text" id="flightNoText" name="flightNoText"  size="5"/>
                    <select id="flightNoCombo">
                        <option value="selectFlightNo"></option>
                        <option value="ul209">UL 209</option>
                        <option value="ul211">UL 211</option>
                    </select>
                    <div id="terminal">Terminal</div>
                    <input type="text" id="terminalText" name="terminalText" size="13"/>
                </div>
                <div id="fifthLine">
                    <div id="specialServices">Special Services</div>
                    <select id="specialServicesCombo">
                        <option value="selectSpecialServices"></option>
                        <option value="plane">Plane</option>
                        <option value="ship">Ship</option>
                        <option value="taxi">Taxi</option>
                    </select>
                    <div id="raType">RA Type</div>
                    <select id="raTypeCombo">
                        <option value="selectRaType"></option>
                        <option value="a">A</option>
                        <option value="b">B</option>
                    </select>
                </div>
            </form>
        </div>

        <div id="bottomLine"></div>

        <div id="footer">
            <div id="footerText1">Terms and Conditions | Contact Us</div>
            <div id="footerText2">Copyright © 2010. All rights reserved. Software by EVES IT Lanka (Pvt) Ltd.</div>
            <div id="w3cLogo"></div>
        </div>

    </div>
</body>
</html>
那么有谁能指导我下一步该做什么呢。。。。。。。。。。。是的，我想就这些。

您需要使用CSS为
输入
字段指定一个宽度，而不是使用
size=..
属性。并非所有浏览器都尊重允许的最大内容和元素大小的
size
属性

所以不是

<input type="text" size="7">
你需要像这样的东西

<input type="text" style="width: 150px;">
（将CSS与其他内容一起放在外部文件中，而不是像示例中那样内联。）

您需要使用CSS，而不是使用
size=..
属性，为
输入
字段指定宽度。并非所有浏览器都尊重允许的最大内容和元素大小的
size
属性

所以不是

<input type="text" size="7">
你需要像这样的东西

<input type="text" style="width: 150px;">
（CSS与其他内容一起放在外部文件中，而不是像示例中那样内联。）

也许您会发现针对浏览器的CSS攻击有点有用：

它允许您为特定浏览器编写单独的CSS规则，这可能是某些情况下唯一的解决方法。

也许您会发现针对浏览器的CSS攻击有点有用：

它允许您为特定浏览器编写单独的CSS规则，这可能是某些情况下唯一的解决方法。

您应该使用CSS设置字段的宽度，而不是使用
size
属性。此外，根据用户代理的不同，
和
元素可能使用与传统W3C“内容框”模型不同的框模型

您可以使用以下CSS在所有浏览器（包括IE）上调整相同的输入大小：

input, select {
   width: 105px;
   -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
   box-sizing: border-box;         /* Opera/IE 8+ */
}
这将强制所有输入使用边框框模型（Quirks IE模型），并确保您的输入在所有浏览器上的大小相同。

您应该使用CSS设置字段的宽度，而不是使用
size
属性。此外，根据用户代理的不同，
和
元素可能使用与传统W3C“内容框”模型不同的框模型

您可以使用以下CSS在所有浏览器（包括IE）上调整相同的输入大小：

input, select {
   width: 105px;
   -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
   box-sizing: border-box;         /* Opera/IE 8+ */
}
这将强制所有输入使用边框框模型（Quirks IE模型），并确保您的输入在所有浏览器上的大小相同。

p/s:事实上，是这样的。。发布大量代码是可以的，但是太多的代码会阻碍人们阅读它们。我想如果你能把你的问题（和代码）缩小一点，你会得到更多的帮助。。发布大量代码是可以的，但是太多的代码会阻碍人们阅读它们。我认为如果你能缩小你的问题（和代码）一点，你会得到更多的帮助。