jQuery .css() 在 FF 中不起作用，但在 Chrome 和 Safari 中起作用答案

【问题标题】：jQuery .css() not working in FF, but does work in Chrome and SafarijQuery .css() 在 FF 中不起作用，但在 Chrome 和 Safari 中起作用
【发布时间】：2012-06-09 23:12:38
【问题描述】：

我正在使用 Backbone 并有以下视图：

class GT.RunManager.Views.ViolationMarker extends Backbone.View
 className: 'violation-marker'

 template: JST['app/templates/violation_marker']

 initialize: (@options) ->
   @x = @options.x
   @y = @options.y
   @location = @options.location
   @render()

 render: =>
   @$el.html @template()
   @$el.data 'location', @location
   @$el.css
     'top': @y
     'left': @x
   this

调用自：

class GT.RunManager.Views.FloorplanView extends Backbone.View
  className: 'floorplan-view'

  events:
   'click .violation-marker' : 'edit_location'
   'click'  : 'create_location'

 initialize: (@options) ->
   @run = @options.run
   @student = @options.student
   @floorplan = @options.run.get('floorplan')
   @locations = new GT.RunManager.Collections.Locations()
   @locations.run = @options.run
   @locations.on 'add', @set_marker
   @locations.on 'reset', @load_markers

 @run.on 'remove_location', (location) =>
   location.destroy() if location
   @load_markers()

 @locations.fetch data: { student_id: @student.id }
 @render()

render: =>
  if @floorplan
    @$el.css 'background-image', "url(data:image/png;base64,#{@floorplan.url})"
  this    

create_location: (e) =>
  @locations.create x: e.offsetX - 10, y: e.offsetY - 10, student_id: @student.id, run_id: @run.id

load_markers: =>
  @$el.find('i').remove()
  @locations.each (location) => @set_marker(location, false)

set_marker: (location, prompt = true) =>
  marker = new GT.RunManager.Views.ViolationMarker(location: location, x: location.get('x'), y: location.get('y'))
  @$el.append marker.el
  if prompt
    @run.trigger 'violations:set', location

这个想法是在用户触摸它的屏幕上放置一个图标（在 iPad 上，用于 exp）。它在 Chrome 和 Safari 中运行良好，但在 Firefox 中却不行，它的图标被放置在父 div 的左上角。

有什么想法吗？

编辑：此主干视图使用以下 css 设置样式：

div.violation-marker {
position: absolute;
background-color: red;
@include border-radius(6px);
padding: 4px;}

模板只是（引导程序）：

<i class="icon icon-fire icon-white"></i>

父 div 的样式为：

.floorplan-view {
position: relative;
float: left;
margin-left: 100px;
width: 755px;
height: 755px; }

【问题讨论】：

还有哪些 CSS 适用于 @el 及其父元素？
这是唯一应用于@el 的css。它有一个带有 css div.violation-marker { position: absolute; background-color: red; @include border-radius(6px); padding: 4px; } 的类
父母呢？父母是position: relative 吗？ .violation-marker 上没有尺寸？
编辑了我原来的问题来回答你的问题。
@MichaelD.Irizarry：CoffeeScript 可以在这种情况下推断逗号。

标签： jquery css backbone.js coffeescript

【解决方案1】：

原来问题在于 Firefox 不处理 e.offsetX 和 e.offsetY。一旦我改变了捕捉位置的方式，一切都很好。这是获取 x 坐标的防 Firefox 版本：

x = (ev.offsetX || ev.clientX - $(ev.target).offset().left)

感谢大家的帮助。

【讨论】：