定位HTML / CSS的跨浏览器问题

时间:2012-03-23 16:38:32

标签: html css cross-browser

我陷入跨浏览器兼容性地狱,我只是没有网页设计专业知识(我是一名网络开发人员)来弄清楚如何在不破坏其他浏览器的情况下解决问题。我很感激任何改变html和css的建议,使它在浏览器(IE9,Firefox,Chrome)之间兼容。我也遇到了悬停在锚点链接上的问题(“买它!”)由于文本调整大小而移动组件。我试图通过改变悬停事件的填充来弥补无济于事。感谢您的任何建议,你可以给那些比html / css更习惯java / php编码的人。

<html>
    <head>
        <style type="text/css">

            body
            {
                background: #EEEEEE;
            }

            div#demo
            {
                background: #5B9EE0;
                margin-left:auto;
                margin-right:auto;
                width:650px;
                font-family: verdana, normal, sans-serif;
                border-radius: 10px 10px 10px 10px;             
            }

            div#demoHeader
            {
                text-align:center;
                font-size:24px;
                font-weight:bold;
                color:#FFFFFF;
            }

            div#demoFooter
            {
                clear:both; 
                padding:5px;    
                font-size:28px;
                background-color:#EEEEEE;
                text-align:right;
            }

            form#demoForm #demoBodyText
            {
                float:left;
                margin-left:10px;
                padding:6px;
            }

            form#demoForm #demoBodyOptions
            {
                float:left;
                margin-right:10px;
                width:300px;
            }

            form#demoForm fieldset
            {
                margin: 0; 
                padding: 0; 
                border: none;
            }

            form#demoForm fieldset legend
            {
                font-size:16px;
                font-weight: bold;
                color:#FFF;
            }

            fieldset#demoBodyText #demoBodyTextArea
            {
                width:300px;
                height:200px;
                border-color: #DAE9F8;
                border-style: solid;
                border-width: 4 px;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                border-radius: 10px 10px 10px 10px; 
                padding:4px;
                resize:none;
            }

            .demoOptionsLabelCell
            {
                width:70px;
                text-align:left;
                display:inline;
                float:left;
            }

            .demoOptionsSelectCell
            {
                width:110px;
                display:inline;
                float:left; 
            }

            .demoOptionsSelectCell select
            {
                /*float:right;*/
            }

            #demoBodyOptions .demoOptionsRow
            {
                background: #85B5E7;
                border-color: #DAE9F8;
                border-style: solid;
                border-width: 2px;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                border-radius: 5px 5px 5px 5px;
                height: 20px;
                list-style: none;
                padding:5px;
                margin-bottom: 2px;
            }

            #demoBodyOptions .demoOptionsRowItems
            {
                list-style-type: none;
                display: inline;
            }

            #demoBodyOption .demoOptionsRowItems li
            {
                display: inline;
            }

            #demoSubmitListItem
            {
                line-height:20px;
            }

            #demoSubmitButton
            {
                border: none;
                width:108px;
                height:30px;
                font-size:20px;

                -moz-border-radius: 20px;
                -webkit-border-radius: 20px;
                -khtml-border-radius: 20px;
                border-radius: 0px 0px 20px 20px;
                color: #000;
                background-color:FF9900;
                position:relative;
                left:34px;
                bottom:2px;
                clear:both;
            }

            #demoSubmitButton:hover
            {
                font-weight: bold;
                cursor:pointer;
                cursor:hand;
            }

            a#demoLink
            {
                border: none;
                padding-left:20px;
                padding-right:20px;
                padding-top:3px;
                text-decoration:none;
                padding-bottom:4px;
                font-size:20px;
                -moz-border-radius: 20px;
                -webkit-border-radius: 20px;
                -khtml-border-radius: 20px;
                border-radius: 0px 0px 20px 20px;
                color: #000;
                background-color:FF9900;
                position:relative;
                left:5px;
                bottom:2px;
            }

            #demoLink:hover
            {
                font-weight:bold;
                padding-right:16px;
                padding-left:16px;
                text-decoration:none;
            }
        </style>
    </head>
    <body>
        <div id="demo">
            <div id="demoHeader">
                Demo
            </div>
            <div id="demoBody">
                <form id = "demoForm" name="demoForm" method="get" action="myscript.php">
                    <fieldset id="demoBodyText">
                        <legend align="center">Demo Text</legend>
                        <textarea id="demoBodyTextArea"  onFocus="if(this.value == 'Enter your demo text here!'){this.value=''; this.onFocus=null;}">Enter your blah blah here!</textarea>
                    </fieldset>
                    <fieldset id="demoBodyOptions">
                        <legend align="center"  >Options</legend>
                        <ul>
                            <li class="demoOptionsRow">
                                <ul class="demoOptionsRowItems">
                                    <li class="demoOptionsLabelCell">
                                        Option:
                                    </li>
                                    <li class="demoOptionsSelectCell">
                                        <select>
                                            <option class="center" value="divider">----(US English)----</option>
                                        </select>
                                    </li>
                                </ul>
                            </li>
                            <li class="demoOptionsRow">
                                <ul class="demoOptionsRowItems">
                                    <li class="demoOptionsLabelCell">
                                        Option:
                                    </li>
                                    <li class="demoOptionsSelectCell">
                                        <select>
                                            <option value="320">Fastest</option>
                                        </select>
                                    </li>
                                </ul>
                            </li>
                            <li class="demoOptionsRow">
                                <ul class="demoOptionsRowItems">
                                    <li class="demoOptionsLabelCell">
                                        Option:
                                    </li>
                                    <li class="demoOptionsSelectCell">
                                        <select>
                                            <option value="4.2">Highest</option>
                                        </select>
                                    </li>
                                </ul>
                            </li>
                            <li class="demoOptionsRow">
                                <ul class="demoOptionsRowItems">
                                    <li class="demoOptionsLabelCell">
                                        Option:
                                    </li>
                                    <li class="demoOptionsSelectCell">
                                        <select>
                                            <option value="none">None</option>
                                        </select>
                                    </li>
                                </ul>
                            </li>
                            <li style="list-style:none;">
                                <a href="http://www.google.com" id="demoLink">Buy it!</a>
                                <input id = "demoSubmitButton" type="submit" value="Do it!" />
                            </li>
                        </ul>
                    </fieldset>
                </form>
            </div>
            <div id="demoFooter">
                Powered by <img align="top" src="someimage" />
            </div>
        </div>
        <br/>
        <br/>
    </body>
</html>

编辑:

在Sparky672,这里的坚持是对具体情况的细分。两个按钮的位置在浏览器中不一致。在Mozilla中,它们排列在底部,在chrome中,右边的按钮稍微向下,即所有内容都完全对齐。因此,通过更改按钮的相对位置无法解决这个问题,因为任何修改浏览器的结果都会导致其他位置不一致(即修复即chrome和firefox错位按钮)。

编辑2:

就我期望的情况而言,两个按钮与所有三个浏览器中的选项行的底部对齐。

再次感谢您的建议,我尽快尝试。

JSFiddle位置:

http://jsfiddle.net/73Vs3/

2 个答案:

答案 0 :(得分:1)

对于#demoLink,请添加:

display: inline-block;
width:100px;
text-align: center;

并删除#demoLink上的填充:hover

a#demoLink:hover
{
  font-weight:bold;
  text-decoration:none;
}

为#demoSubmitButton做同样的事情

答案 1 :(得分:1)

摆脱a#demoLink:hover的特殊填充,并a#demoLink添加:

display: block;
float: left;
white-space: nowrap;
width: 72px; /*This should be the width, in pixels, that you want the button to remain*/

这有效地消除了子文本的大小对父容器的影响。 (见:http://jsfiddle.net/5yVzV/

编辑:同样,#demoSubmitButton,删除clear: both并添加:

display: block;
float: left;