Php 无法使徽标显示在正确的位置以及跨浏览器问题

我正在使用Twitter引导wordpress主题。我想标志（一张脸的照片）出现在博客标题旁边。我尝试过绝对和相对定位以及其他css样式，但是如果不扩展工具栏的高度，或者不经意地影响相邻元素，我就无法使徽标显示在正确的位置

                        </nav>

                                                    <form class="navbar-search pull-right" role="search" method="get" id="searchform" action="http://blog.freeteacher.co.uk/">
                            <input name="s" id="s" type="text" class="search-query placeholder" placeholder="Search">
                        </form>

                    </div>

如何修复css，使徽标在所有浏览器中正确显示，并且不会无意中影响任何其他元素

                        </nav>

                                                    <form class="navbar-search pull-right" role="search" method="get" id="searchform" action="http://blog.freeteacher.co.uk/">
                            <input name="s" id="s" type="text" class="search-query placeholder" placeholder="Search">
                        </form>

                    </div>

这是header.php中的源代码，工具栏在主体中生成，位于页面顶部

<div class="container-fluid nav-container">
                        <nav role="navigation"><img style="z-index: 10; position:absolute; margin-left: -235px" src="http://blog.freeteacher.co.uk/wp-content/themes/wordpress-bootstrap-V2.1/images/logo_small.png">
                            <a class="brand" id="logo" title="Fun Learning for Children | Resources for Parents and Teachers" href="http://blog.freeteacher.co.uk">FreeTeacher – Blog</a>

                            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </a>

                            <div class="nav-collapse">
                                <ul id="menu-main" class="nav"><li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://blog.freeteacher.co.uk/about/">About</a></li>

                        </nav>

                                                    <form class="navbar-search pull-right" role="search" method="get" id="searchform" action="http://blog.freeteacher.co.uk/">
                            <input name="s" id="s" type="text" class="search-query placeholder" placeholder="Search">
                        </form>

                    </div>

                        </nav>

                                                    <form class="navbar-search pull-right" role="search" method="get" id="searchform" action="http://blog.freeteacher.co.uk/">
                            <input name="s" id="s" type="text" class="search-query placeholder" placeholder="Search">
                        </form>

                    </div>

这里有一个指向css文件的链接，它只是twitter引导css

                        </nav>

                                                    <form class="navbar-search pull-right" role="search" method="get" id="searchform" action="http://blog.freeteacher.co.uk/">
                            <input name="s" id="s" type="text" class="search-query placeholder" placeholder="Search">
                        </form>

                    </div>

另外-这是呈现此内容的页面

                        </nav>

                                                    <form class="navbar-search pull-right" role="search" method="get" id="searchform" action="http://blog.freeteacher.co.uk/">
                            <input name="s" id="s" type="text" class="search-query placeholder" placeholder="Search">
                        </form>

                    </div>

---

根据我在Firebug中的测试，如果您从

左边距更改
元素的内联样式：-235px至<代码>左侧：35px你最终得到了你想要的东西。您可以调整35px的值，以使其精确到您想要的位置。为了确定它总是在你想要的地方，也值得设置
top:0但这可能不是必需的

                        </nav>

                                                    <form class="navbar-search pull-right" role="search" method="get" id="searchform" action="http://blog.freeteacher.co.uk/">
                            <input name="s" id="s" type="text" class="search-query placeholder" placeholder="Search">
                        </form>

                    </div>

作为参考，这是因为您有
position:absolute
set，这意味着它将参照分配了位置的第一个容器元素来定位元素，或者如果（在本例中）没有这样的父元素，则将参照整个文档来定位元素。因此设置
top:0；左：35px
告诉浏览器将图像从左上角向下0像素，向左35像素。
发布带有问题的CSS，只发布呈现的HTML（“查看源代码”），因为PHP与JavaScript完全无关，它在客户端使用HTML。如果可能的话，请使用发布我们可以使用的演示。也包括实际的图像文件。为了清楚起见。有没有一种方法，我可以让它同时适用于该网站的移动版本？我注意到，在移动版上，通过应用上面的边距（因为它是绝对定位的），logo阻碍了博客标题。有什么提示或建议吗？嗯，你可以为手机提供一个单独的版本。或者你可以使用PHP检测它是否是移动浏览器，然后让PHP编写不同的内联维度（如果是）。wordpress主题使用twitter引导，因此它内置了移动检测，对吗？那么，我是否应该找出特定于手机的代码，并改变其维度？我还没有对wordpress主题做过很多工作，所以我不能肯定，但对我来说，这听起来是一个很好的方向。
                        </nav>

                                                    <form class="navbar-search pull-right" role="search" method="get" id="searchform" action="http://blog.freeteacher.co.uk/">
                            <input name="s" id="s" type="text" class="search-query placeholder" placeholder="Search">
                        </form>

                    </div>