Question

到目前为止，我遇到了很多问题。

首先，不同的浏览器正在响应不同的媒体查询，即使它们都显示在同一屏幕上。我设法解决了这个问题，但现在我被卡住了。我有一个在Chrome和Firefox中运行的图像。如果我在Chrome中修复它，它会在Firefox中脱节，如果我在Firefox中修复它，它会在Chrome中崩溃。

目前它在Firefox中被打破了，因为使用Firebug而不是Chrome更容易尝试使用它。我尝试使用供应商特定的前缀，使用Javascript定位Firefox，重写媒体查询 - 没有任何作用。

我从来没有听说过在同一个屏幕上使用不同媒体查询的浏览器窗口，也没有其他任何我问过的人。我很感激任何帮助。您可以在www.rachelbrent.com/#about上找到问题，如果有人查看CSS（这是一团糟，我知道）它位于base.min.css文件中，而且有问题的div是img_place_about。

编辑以澄清：这是我在“关于”部分中的图像（我在滑块顶部也有一些其他图像问题。整件事情一团糟）就代码而言，这是HTML

<div class="fullWidth darkStyle" >
  <div class="container" >
    <div class="separator_mini"></div>
    <div class="nine columns" >
      <div class="mini_description">
        The first time I ever saw HTML I was in middle school and I was trying to figure out how to make a trail of planets follow a cursor around a page about the solar system. My main reference was a Geocities page that used Comic Sans liberally and catered to the Lisa Frank crowd. Yikes.</br>
        <div class="separator_mini"></div>
        Fast-forward ten years. I’ve earned an undergraduate degree from the University of Georgia in Advertising/New Media and I’ve almost completed my master’s in Interactive Media from Elon University. I’ll graduate this May, and I’m ready to take on the world. </br>
        <div class="separator_mini"></div>
        I’ve been lucky to have a wide range of digital communications experience, but I like to think of myself as a design minded strategist.
        <div class="img_place_about" >
          <img src="images/about_image1.jpg" class="scale-img "  >
          <div class="overlay_about social" >
            <ul class="social_bookmarks" >
              <li class="twitter_white noMargin"><a href="http://twitter.com/rbrent" target="_blank"></a></li>
              <li class="facebook_white noMargin"><a href="http://www.facebook.com/rachel.brent" target="_blank"></a></li>
              <li class="gplus_white noMargin"><a href="https://plus.google.com/118253125375848607885/posts" target="_blank"></a></li>
              <li class="linkedin_white noMargin"><a href="http://www.linkedin.com/in/rachelbrent" target="_blank"></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="sixteen columns" >
      <div class="mini_description">
        I combine my educational background with my work history in public relations, project and social media management, and event coordination to make sure every project gets the most out of its digital content. The best strategy works in concert with good design though, and I always keep that in mind whether working with a team or leading one.  </br>
        <div class="separator_mini"></div>
        I get a thrill from outside the box problem solving and if you’re interested to hear more about that, I’d love to chat. Scroll over my picture to connect now, or check out the rest of my work and drop me a line at the end. Either way, I can’t wait to hear from you. </br>
        <hr>
      </div>
    </div>

这是CSS

原件：

.img_place_about {
  display: inline;
  float: right;
  margin-left: 48%;
  margin-top: -35;
  padding: 0;
  position: absolute;
}

定位Firefox：

@-moz-document url-prefix() {
  .img_place_about {    
    display: inline;
    float: right;
    margin-left: 17%;
    margin-top: -25%;
    -moz-margin-top: -25%;
    padding: 5px;
    position: absolute;
    width: 40%;
  } 
}

问题代码：

.img_place_about {
  display: inline;
  float: right;
  margin-left: 17%;
  margin-top: -40%;
  -moz-margin-top: -25%;
  padding: 5px;
  position: absolute;

Firefox的代码应该是什么：

.img_place_about {    
  display: inline;
  float: right;
  margin-left: 17%;
  margin-top: -25%;
  -moz-margin-top: -25%;
  padding: 5px;
  position: absolute;
  width: 40%;
}

希望这会有所帮助。我知道这是一个漫无边际的混乱。

在CSS中定位浏览器

0 个答案: