1

私は今までなんとか回避できた多くの問題を抱えています。

まず、すべて同じ画面に表示されている場合でも、さまざまなブラウザーがさまざまなメディア クエリに応答しています。私はその問題を回避することができましたが、今は立ち往生しています。Chrome と Firefox で動作している画像があります。Chrome で修正すると Firefox で脱線し、Firefox で修正すると Chrome で故障します。

Chrome よりも Firebug をいじるほうが簡単なため、現在 Firefox では壊れています。ベンダー固有のプレフィックスを使用して、Firefox を Javascript でターゲットにし、メディア クエリを書き換えてみましたが、何も機能しません。

同じ画面で異なるメディア クエリを使用するブラウザ ウィンドウについては聞いたことがありません。助けていただければ幸いです。www.rachelbrent.com/#about で問題を見つけることができます。だれかが CSS を見た場合 (それはめちゃくちゃです、私は知っています)、それは base.min.css ファイルにあり、問題の div は img_place_about です。

明確にするために編集：「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%;
}

うまくいけば、それは役に立ちます。私はそれがとりとめのない混乱であることを知っています。

4

0 に答える 0