Inside a single div, I have 3 spans. When viewed in Chrome, all three spans are vertically aligned in the center. However, in Firefox, the alignment is different.
Below is the code for the div containing the quantity label, - button, text field, and + button:
<div class="form-item form-type-textfield form-item-quantity">
<label for="edit-quantity">Quantity </label>
<span class="commerce-quantity-plusminus-link commerce-quantity-plusminus-link-decrease commerce-quantity-plusminus-link-disabled"><a href="/myWebsite/node/12" class="button" onclick="Drupal.commerce_extra_quantity_quantity('#edit-quantity', -1); return false;">-</a></span>
<span class="inline-block-text-box"><input type="text" id="edit-quantity" name="quantity" value="1" size="5" maxlength="128" class="form-text"></span>
<span class="commerce-quantity-plusminus-link commerce-quantity-plusminus-link-increase commerce-quantity-plusminus-link-disabled"><a href="/myWebsite/node/12" class="button" onclick="Drupal.commerce_extra_quantity_quantity('#edit-quantity', 1); return false;">+</a></span>
</div>
Here's the CSS applicable to it:
.inline-block-text-box
{
/* This will show increment and decrement buttons in the same line as the text field */
display: inline-block;
}
If you encounter any issues with this layout, please let me know so we can address them accordingly.