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

Question

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

http://www.mse-scottsdale.org/events

我试过显示:-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;
}