验证用于标准化的HTML代码

Question

这是我的Dropdown框和jquery滑块的html代码和小提琴。 IT在我的系统上工作正常。但不知道为什么它在小提琴上有问题。

Fiddle

当用户点击FLIP下拉菜单更改为滑块时，反之亦然。

HTML：

<div id="home" class="container division-container">
    <div class="center-container">
        <img src="logobeta.png" class="img-responsive" alt="Responsive image">
        <div class="subtitle">Intent from Content </div>
        <div class="magic-container">               
            <div class="input-group">
                <input type="text" class="typeahead form-control" placeholder="Select category ..." />
                <ul class="dropdown-menu" style= "margin-top: -10px !important;">
                      <li id="one"><a href="#">Sports</a></li>
                    <li role="presentation" class="divider"></li>
                      <li id="two"><a href="#">Entertainment</a></li>
                    <li role="presentation" class="divider"></li>
                      <li id="three"><a href="#">Politics</a></li>
                    <li role="presentation" class="divider"></li>
                     <li id="four"><a href="#">Business</a></li>
                    <li role="presentation" class="divider"></li>
                     <li id="four"><a href="#">Travel</a></li>
                    <li role="presentation" class="divider"></li>
                     <li id="four"><a href="#">Celebrity</a></li>


                      <li><a href="#"></a></li>
                </ul>

                <span class="flip">
        <a class="flipDropDown" href="#"> FLIP </a> 
                </span>
            </div>
       </div>
        <div class="magic-bar">
            <span id="rating-slider" class="ui-slider-range"></span>
            <span class="flip">
                <a href="#"> FLIP </a>
            </span>
        </div>
    </div>

我怀疑这段代码是否是标准的，每个元素是否相互关联。是吗？

我想改变或添加页面中任何元素的位置不应该反映到上面元素的位置。

目前在FF和Chrome方面看起来有所不同。为不给工作小提琴而道歉。