margin-left 和 width 属性在 mozilla firefox 中不起作用

Question

我在使用 mozilla firefox 时遇到了一些 css 问题，我编写的 css 在 chrome 中运行良好。以下是参考 link:

我试过显示：-moz-box；在 mozilla 中仍然不是很好，我不知道如何为 mozilla firefox 编写特定的 css。谁能帮我？

活动页面代码如下：

$(document).ready(function(){
    $(".plus").click(function(){
        //to get the current element id 
        //alert($(this).attr('id'));
       $('#a'+$(this).attr('id')).slideToggle();
    });
});

<style>
.event_profit{
  background: #ecece9;
  width: 100%;
  float: left;
  border-bottom: 2px solid #fff;
  /*height:180px;*/
  }  
.extarContent{
  background: #ecece9;
  width: 100%;
  border-bottom: 2px solid #fff;
  height:auto;
  margin-left:2px;
  } 
  .extarContent p{
  margin-left:19%;
  margin-right: 10%;
  text-align: justify;
  padding-bottom:10px;
  }
.plus{
  width:5%;
  margin-top: 5%;
  margin-left: 5%;
}
.event_content p{
 margin: 10px 0;
}
.maincontainer{
 width:100%;
 display: -webkit-inline-box;

}
.event_image{
  width: 15%;
  margin-left: 2%;
  margin-top:1%;
}

.event_content{
 width: 70%;
  margin-top: 2%;
  margin-left: 2%;
  text-align: justify;
}
</style>

<div class="event_profit">
 
 <div class="maincontainer">
 
  <div class="event_image">
  
 <img alt="Upload a image for event" src="$cur_event_image.getData()" class="img-circle" style="height:150px;width:150px">
 
  </div>
  
  <div class="event_content" >
     <h3>Kickoff Event!</h3>
   <p> </p>
   <p>Thursday, April 9, 2015, 4:00-7:00PM
8102 East Jackrabbit Road, Scottsdale, AZ

Click here for a printable flyer.

Join us for an Open House to unveil Scottsdale Adapted Recreation's brand new
Multi-Sensory Environment! Let your senses guide your journey through the four zones of this unique space!</p>
  
  </div>
  
  <div class="plus" id="$a">
   <img src="/documents/149710/0/plus2.png/4498199f-61a1-45cc-850c-4884e12b7193?t=1428069502306" style="width:33px;height:33px;"/>
  </div>
           
 </div>
  <div class="extarContent" id="a$a" style="display:none">
        <p>  </p>
  <p>Ribbon Cutting ceremony with Mayor Jim Lane! (6:30)
Prizes raffled every half hour!
Healthy snacks!
Leave your mark on the room with a handcrafted addition!</p>
   </div>

</div>

Answer 1

Mozilla 不支持 display:inline-box;。

所以，你可以完成这种类型的代码：

.maincontainer{
    display:inline-block;
}
.event_image{
    display:inline-block;
    vertical-align: top;
}
.event_content{
    display:inline-block;
    vertical-align: top;
}
.plus{
    display:inline-block;
    vertical-align: top;
}

Answer 2

执行以下操作

1.remove display:inline-box; 在 .maincontainer class
2.add float: left; 在“.event_image”、“.event_content”和“.plus”中 classes

margin-left 和 width 属性在 mozilla firefox 中不起作用

margin-left and width properties not working in mozilla firefox

html

javascript

css

firefox

jquery